Angular指令可以编译ng-click元素

Question

我写了一个指令，将用ng-click指令呈现子元素，这是我的代码：

指令

angular.module('myApp')
  .directive('popover', [
    '$compile',
    function($compile) {
      return {
        scope: {
          items: "=",
        },
        link: function($scope, $element, $attrs){
          $.each($scope.items, function(key, value) {
            var item = '<a ng-click="'+value.ngClick+'">'+value.name+'</a>';
            $element.append($compile(item)($scope));
          });
        }
      }
    }
  ]
);

模板

<div popover items="myItems"></div>

控制器

angular.module('myApp')
  .controller('MyCtrl', [
    '$scope',
    function ($scope) {
      $scope.myItems = [
        {name: 'Do this', ngClick: 'doThis()' },
        {name: 'Do that', ngClick: 'doThat()' },
      ];
      $scope.doThis = function() { console.log('this is done') };
      $scope.doThat = function() { console.log('that is done') };
    }
  ]
);

rendring工作得很好，我得到了一个a元素的列表，右键点击它，但函数doThis（）和doThat（）从未触发

我想问题出在$compile命令附近，但我已经在其他上下文中使用了这个命令，而且它似乎可以通过这种方式正常工作。此外，在Chrome开发工具栏中，我没有看到与元素的ng-click指令相关的事件。

知道吗？感谢

Answer 1

您的指令有一个独立的作用域，因此doThis和doThat不是指令的作用域。要么你删除隔离的作用域，要么你可以像这样传递你的函数：

app.controller('MainCtrl', function($scope) {
  $scope.myItems = [
        {name: 'Do this', ngClick: doThis },
        {name: 'Do that', ngClick: doThat },
      ];
      function doThis() { console.log('this is done') };
      function doThat() { console.log('that is done') };
});
app
  .directive('popover', function($compile) {
      return {
        scope: {
          items: "=",
        },
        link: function($scope, $element, $attrs){
          $scope.clickFunctions = {};
          $.each($scope.items, function(key, value) {
            $scope.clickFunctions[value.name] = value.ngClick
            var item = '<a ng-click="clickFunctions[''+value.name+'']()">'+value.name+'</a>';
            $element.append($compile(item)($scope));
          });
        }
      }
    }
);

看看这个plunker的演示。