ng-click doesnt seem to work on programmatically inserted list ( li ) elements

Question

I have a search box which on the input will get a json data from a server and create a menu list from the json data. so, I've created a funcion in the controller that is triggered when there is a change in the search box through ng-change, also the function calls a different function createMenu which injects the list elements with something like, element.append(''+name+'');

but the handleClick method seems to be never triggered when I click the list item. can anyone tell me how to resolve this? any help will be appreciated. thanks! :)

//ascript.js

var landApp = angular.module('landApp', ['ngRoute']);
function navCtrl($scope , $compile, $element, $rootScope , $http) {
        $scope.handleClick = function(id) {
          console.log("Clicked");
          console.log(id);
        };

     $scope.createMenu = function(elementJson,element) {
       if(angular.isArray(elementJson)) {
         angular.forEach(elementJson, function(child , key) {
           $scope.createMenu(child,element);
         });
           return;
       }

       var name = elementJson.name;
       var id = elementJson.id;
       var children = elementJson.child;

       if(name=="Product"){
         $scope.createMenu(children,element);
         return;
       }

       var elem = angular.element('<ul></ul>');

       element.append(elem);

       $scope.createMenuElement(name,id,elem);
       if(children != null || children !=undefined) {
         if(angular.isArray(children)){
             angular.forEach(children , function(child,key) {
                 $scope.createMenu(child,elem);
             });
           } else {
                 $scope.createMenu(children,elem);
           }
        }

   }

    $scope.createMenuElement = function(name,id,element) {
      element.append('<li id = '+id+' class = product ng-click = handleClick('+id+') >'+name+'</li>');
  }

   $scope.search_change = function() {
     if($scope.query.length > 0) {
       var elem = angular.element('#navigator');
       //angular.element('#navigator');
       $http.get('/data/search?query=' + $scope.query).
          success(function(data, status, headers, config) {
           console.log(data);
            elem.html('');
             var children = data.child;
             console.log(children);
                $scope.createMenu(children,elem);
          }).
          error(function(data, status, headers, config) {
            // log error
          });
     };
   }
}

}

This really isn't doing stuff in a very nice manner - however, if you really do plan on generating markup dynamically this answer should point you in the right direction: http://stackoverflow.com/questions/18157305/angularjs-compiling-dynamic-html-strings-from-database — Kyle Muir, Dec 16 '14 at 09:07
@KyleMuir Thanks for the link :) . I know it could be a bit wrong way to do it cause I'm not really a UI guy and this is the first time I'm trying angular as well. I apologize if its a bit wrong or confusing. — Vinoth Kumar Asaithambi, Dec 16 '14 at 09:15

score 2 · Accepted Answer · answered Dec 16 '14 at 09:33

I think you should have some menu variable, i.e.:

$scope.menu = [
    {
        id: 123,
        name: 'This link will take you to blabla'
    },
    ...
];

Then in your html you have something like:

<ul>
    <li ng-repeat="item in menu" ng-click="doSomething(item.id)">{{item.name}}</li>
</ul>

Also, you would have to have some service that sends a request to your data source and populates $scope.menu;

ng-click doesnt seem to work on programmatically inserted list ( li ) elements

1 Answers1