能否角指令編譯NG單擊元素

Question

我寫了一個指令，將呈現與他們NG-點擊指令子元素，這是我的代碼：

DIRECTIVE

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

    } 
    ] 
); 

工作正常，我得到一個具有正確屬性ng元素的A元素列表，但函數doThis（）和doThat（）永遠不會觸發

我想問題是靠近$ compile命令，但是我已經在其他上下文中使用了這個命令，並且它似乎能夠以這種方式正常工作。另外，在Chrome開發工具欄中，我看不到與元素的ng-click指令相關的事件。

有什麼想法？ 謝謝

Answer 1

你的指令有一個隔離範圍，所以doThis和do not不是指令的範圍。在解除隔離範圍，或者你可以通過你的職責是這樣的：

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

的演示中看到this plunker。