angularjs : ng-click event is not working

Question

I am trying to append li element using jquery.the "li" element is appended successfully howerver ng-click event is not working. please help.

below is my code.

$(".language-list").append("<li><span ng-click='selectOperator(op)'><label for=checkbox" + $scope.allOperators[op].operator_id +   " class=labeloperator" + ">" + $scope.allOperators[op].operator_name + "</label></div></span></li>");

where do you run this line? in directive? if yes, $compile it first — Maxim Shoustin
– Maxim Shoustin, Commented Feb 6, 2014 at 12:58
I'm sure you know by now that this is not really the right way to write Angular. You should always favour templates over direct DOM manipulation. This looks more like a jQuery plugin. — superluminary
– superluminary, Commented Nov 27, 2015 at 13:06

Maxim Shoustin · Accepted Answer · 2014-02-06 13:11:28Z

5

On append you need compile the element.

It not good practice to do that in controller. Use directive for any DOM selection/manipulation.

Anyways here is example:

var elmnt = angular.element(/* ... */);


elmnt.append(
           $compile(
           "<li><span ng-click='selectOperator(op)'><label for=checkbox" + $scope.allOperators[op].operator_id +   " class=labeloperator" + ">" + $scope.allOperators[op].operator_name + "</label></div></span></li>"
               )($scope));

edited Feb 6, 2014 at 13:11

answered Feb 6, 2014 at 13:02

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fals · Accepted Answer · 2014-02-06 13:04:35Z

1

You must compile the dynamic HTML to do the work.

$(".language-list")
  .append(
        $compile(
           "<li><span ng-click='selectOperator(op)'><label for=checkbox" + 
            $scope.allOperators[op].operator_id +   " class=labeloperator" + ">" +
            $scope.allOperators[op].operator_name + "</label></div></span></li>")
 )($scope);

For more Information about $compile service

answered Feb 6, 2014 at 13:04

Fals

6,8394 gold badges26 silver badges46 bronze badges

Collectives™ on Stack Overflow

angularjs : ng-click event is not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related