AngularJS Wie man eine Direktivenfunktion vom Controller

Question

aufruft Ich suchte nach einer Möglichkeit zu wissen, wie man die Funktion innerhalb der Direktive vom Controller aufruft. Ich habe die Schnipsel, aber damit bin ich neu in eckigen das ist, warum der unten Code Flow ist nicht sehr klar. irgendjemand könnte sich erklären, wie der Code funktioniert. Dank

<map set-fn="setDirectiveFn(theDirFn)"></map> 
<button ng-click="directiveFn()">call directive function</button> 

scope: { setFn: '&' }, 
link: function(scope, element, attrs) { 
    scope.updateMap = function() { 
     alert('inside updateMap()'); 
    } 
    scope.setFn({theDirFn: scope.updateMap}); 
} 

function MyCtrl($scope) { 
    $scope.setDirectiveFn = function(directiveFn) { 
     $scope.directiveFn = directiveFn; 
    }; 
} 

Answer 1

Start Aufruf Mit der Steuerung erstellt dieser Block eine setDirectiveFn() Methode auf dem Objekt $scope in Ihrem Controller, das einen einzelnen Parameter (directiveFn) verwendet und diesen Parameter dann verwendet r, um eine directiveFn() Methode auf dem $scope Objekt in Ihrem Controller zu erstellen.

$scope.setDirectiveFn = function(directiveFn) { 
     $scope.directiveFn = directiveFn; 
    }; 

Innerhalb der Richtlinie ist die Schaffung eines updateMap() Methode auf dem scope Objekt in der Richtlinie und dann den Aufruf der setFn() Methode, die von dieser Linie auf die $scope.setDirectiveFn() Verfahren abgebildet wird: <map set-fn="setDirectiveFn(theDirFn)"></map> in Ihrem HTML und diese Zeile: scope: { setFn: '&' } in Ihre Anweisung. Es besteht die scope.updateMap() Methode, die $scope.directiveFn() in Ihrem Controller gleich scope.updateMap() in Ihrer Richtlinie setzt.

link: function(scope, element, attrs) { 
    scope.updateMap = function() { 
     alert('inside updateMap()'); 
    } 
    scope.setFn({theDirFn: scope.updateMap}); 
} 

Der Knopf wird dann $scope.directiveFn() in Ihrem Controller aufrufen, die in der Richtlinie scope.updateMap() abgebildet wurde.

<button ng-click="directiveFn()">call directive function</button> 

Answer 2

Sie es mit Winkel PubSub

link: function(scope, element, attrs) { 
    scope.updateMap = function() { 
     alert('inside updateMap()'); 
    } 
    scope.setFn({theDirFn: scope.updateMap}); 

    scope.$on('eventName', function(event, data){ 
     //call directive function here 
    }) 
} 

function MyCtrl($scope) { 

     $scope.$broadcast('eventName', data) 
} 

Answer 3

tun kann ich diesen Artikel empfehlen zu lesen: hat von scope: {setFn: '&'}

eine Isolate Scope gesetzt http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope

Grundsätzlich Ihre Richtlinie Was dies bedeutet Dies ist der Fall, wenn Sie Daten über Attribute an Ihre Anweisung senden können, in diesem Fall das Attribut set-fn.

in Ihrer Richtlinie enthält scope.setFn nun die Funktion, um es über Attribut in Ihrem HTML (setDirectiveFn(theDirFn))

So scope.setFn({theDirFn: scope.updateMap});

ruft die Funktion gesendet definiert in

function MyCtrl($scope) { 
    $scope.setDirectiveFn = function(directiveFn) { 
     $scope.directiveFn = directiveFn; 
    }; 
}