ng-click似乎不适用于以编程方式插入的列表(li)元素

Question

我有一个搜索框，它将在输入上从服务器获取 json 数据并从 json 数据创建菜单列表。 因此，我在控制器中创建了一个功能，当搜索框中通过 ng-change 发生变化时会触发该功能，该函数还调用了不同的函数 createMenu，该函数为列表元素注入类似的东西， element.append（''+name+'' ）;

但是当我单击列表项时，句柄单击方法似乎从未触发。 谁能告诉我如何解决这个问题？ 任何帮助将不胜感激。 谢谢！ :)

//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
          });
     };
   }
}
}

Answer 1

我认为你应该有一些菜单变量，即：

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

然后在您的 html 中，您有类似以下内容：

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

此外，您必须有一些服务将请求发送到您的数据源并填充 $scope.menu;