Kann Angular kompilieren ng Sie auf Elemente

Question

ich eine Richtlinie schrieb, die auf ihnen Subelementen mit ng-Click-Richtlinie machen wird, ist dies der Code, den ich habe:

RICHTLINIE

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

TEMPLATE

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

CONTROLLER

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

    } 
    ] 
); 

Das Rending funktioniert gut, ich bekomme eine Liste von A-Element mit rechten Attribut ng-klicken Sie darauf, aber die Funktionen doThis() und doThat() werden nie ausgelöst

Ich nehme an, das Problem in der Nähe der $ kompilieren Befehl, aber ich habe diesen Befehl bereits in einem anderen Kontext verwendet und es schien auf diese Weise gut zu funktionieren. Außerdem sehe ich in der Chrome-Entwicklungswerkzeugleiste kein Ereignis im Zusammenhang mit der ng-click-Anweisung für die Elemente.

Irgendeine Idee? Danke

Answer 1

Ihre Direktive hat einen isolierten Bereich, also tun dies und tun das nicht ist der Anwendungsbereich der Richtlinie. Entweder man den isolierten Rahmen entfernen, oder Sie können Ihre Funktionen wie folgt passieren:

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

Siehe this plunker für Demo.