bind Callback zu Direktive ohne isolierten Geltungsbereich

Question

Wenn eine Callback-Funktion an eine Direktive gebunden wird, ist es wichtig für mich, diese Funktion mit dem richtigen Kontext auszuführen. Nun, solange die Richtlinie einen isolierten Umfang hat, ist es kein Problem

<bar-foo callback="mycontroller.callback()"></bar-foo> 

und die Richtlinie:

... 
scope:{ 
    callback: '&' 
}, 
... 

Ohne einen isolierten Rahmen ich den Rückruf von dem $ attrs extrahiere attrubute

$scope.callback = $parse($attrs.callback)($scope); 

Aber jetzt kann ich nicht tun

<bar-foo callback="mycontroller.callback()"></bar-foo> 

Weil es den Rückruf direkt ausführt. Was wäre der bevorzugte Weg, um dies zu lösen?

DEMO

Answer 1

zuerst eine Funktion in Ihrem Controller erstellen, die explizit den Wert der this innerhalb dieser Funktion setzt:

this.exportableCallback = this.callback.bind(this); 

wo this.callback ist, die Sie für den isolierten Bereich zu verwenden.

Zweiter Schritt setzt es als Attribut

<hello-world callback="mycontroller.exportableCallback"></hello-world> 

, wo man nicht Aufruf der Funktion tun wie Sie mit isolierten Umfang haben.

Siehe fiddle.

Eine weitere Option (wenn Sie this.callback aus dem Controller entfernen) ist

this.exportableCallback = function() { 
    console.log(this.test); 
}.bind(this); 

Wenn Sie Argumente zu übergeben, um diese Funktion wollen:

this.exportableCallback = function() { 
    console.log(arguments); 
}.bind(this); 

Answer 2

Da dieser Rahmen isoliert ist nicht nicht ist Nur ein Fall von Berufung, was Sie wollen?

.directive('helloWorld', function() { 
    return { 
     restrict: 'E', 
     template: '<button ng-click="mycontroller.callback()">Not isolated</button>', 
    } 
}); 

und dann nur Ihre Anweisung aufrufen?

<hello-world></hello-world> 

Oder fehle ich hier etwas ?? Die Angabe des Controllers mit dem Attribut require ist ebenfalls wünschenswert.

Answer 3

In Ihrer Direktive ohne einen Bereich, greifen Sie einfach auf mycontroller.callback() in der Richtlinie Vorlage.

.directive('helloWorld', function() { 
    return { 
     restrict: 'E', 
     scope: false, 
     //Use THIS 
     template: '<button ng-click="mycontroller.callback()">Not isolated</button>', 
     //NOT this     
     //template: '<button ng-click="callback()">Not isolated</button>', 
     controller: function ($attrs, $scope, $parse) { 
       //$scope.callback = $parse($attrs.callback)($scope); 
     } 
    } 
}); 

Da die Richtlinie entspricht keinen Rahmen seiner eigenen hat, hat die Vorlage direkten Zugriff auf die Steuerung, die mit ng-controller="MyCtrl as mycontroller" instanziiert wurde.

---

was, wenn Sie die Richtlinie wieder verwenden möchten?

In diesem Fall binden Sie einen Click-Handler an das Element.

.directive('helloWorld', function() { 
    return { 
     restrict: 'E', 
     scope: false, 
     template: '<button>Not isolated</button>', 
     link: function (scope, elem, attrs) { 
      elem.on("click", function(e) { 
       scope.$eval(attrs.callback, {$event: e}); 
      }); 
     } 
    } 
}); 

Wenn das Element der Richtlinie ist der Winkel Expression durch das callback Attribut definierte geklickt wird als $event Herdes mit dem Ereignisobjekt ausgewertet werden. Weitere Informationen zu $event finden Sie unter AngularJS Developer Guide -- $event.