insert ng-click in append statment angular js

Question

  for(var i = 0 ; i<data.success.length; i++)
            {
              // console.log(data.success[i]);

                  $("#show_rules").append("<li style='display: flex;'><div class='checkbox' id='container_divv'><a id='mm'ng-click='edit_initial_infoq()' >"+data.success[i].name+"</a><button ng-click='edit_initial_infoq()'>dd</button></div></li>");


            }
            })

            };
                         $scope.edit_initial_infoq= function(){
                         console.log('edit_initial_infoq');
                             };

it's not giving me error and cant process the edit_initial_infoq function

Its hard to tell exactly what is going on with the limited code segment you included. In this inside of a controller or directive? Can you provide a bit more context in regards to the code around it. — Michael Lynch, Feb 13 '19 at 14:53
it's the controller i'm appending the li including with ng-click — mohamed mohamed, Feb 13 '19 at 14:59

score 0 · Accepted Answer · answered Feb 13 '19 at 15:04

I believe the issue is that you're appending to the html and angular isn't aware of the changes and therefore the ng-click isn't working. Try the following:

Instead of:

var html = "<li style='display: flex;'><div class='checkbox' id='container_divv'><a id='mm' ng-click='edit_initial_infoq()'>"+data.success[i].name+"</a><button ng-click='edit_initial_infoq()'>dd</button></div></li>";
#("#show_rules").append(html);

Try doing:

var html = "<li style='display: flex;'><div class='checkbox' id='container_divv'><a id='mm' ng-click='edit_initial_infoq()'>"+data.success[i].name+"</a><button ng-click='edit_initial_infoq()'>dd</button></div></li>";
var myElement = angular.element( document.querySelector( '#show_rules' ) );
myElement.append( $compile(html)($scope) );

HOWEVER... you shouldn't do this. You shouldn't manipulate the DOM inside of a controller as you're doing. Instead, try doing the following:

JavaScript:

YourService.loadRules().then(function(data){
    $scope.rules = data.success;
});

HTML:

<ul id="show_rules">
    <li ng-repeat="rule in rules" style='display: flex;'>
        <div class='checkbox' id='container_divv'>
            <a id='mm' ng-click='edit_initial_infoq()'>
                {{rule.name}}
            </a>
            <button ng-click='edit_initial_infoq()'>dd</button>
        </div>
    </li>
</ul>

Here is a great SO question to read, the first answer is loaded with great information: "Thinking in AngularJS" if I have a jQuery background?

insert ng-click in append statment angular js

1 Answers1