能否角指令编译NG单击元素

我写了一个指令，将呈现与他们NG-点击指令子元素，这是我的代码：能否角指令编译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指令相关的事件。

有什么想法？谢谢

来源

2016-04-29 Vincent Wasteels

您可以像@etiennecrb一样执行或者将'$ scope.myItems'改为'$ scope.myItems = [{name：'这样做'，ngClick：'$ parent.doThis（）'}，{name ：'这样做'，ngClick：'$ parent.doThat（）'}];'，但我不会推荐这种方式，因为它是一个丑陋的黑客。 [小提琴]（https://jsfiddle.net/themyth92/f6r8nv5o） – themyth92

你的指令有一个隔离范围，所以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。

来源

2016-04-29 10:18:39 etiennecrb

能否角指令编译NG单击元素

回答

相关问题