eckige Zwei-Wege-Funktion verbindlich Best Practice

Question

Meine Anforderung ist die Child-Direktive-Funktion von Parent-Direktive aufrufen. Momentan haben wir ein Publish-Subscribe-Muster implementiert. Child-Direktive subscribe für irgendein Ereignis und wir setzen einen Trigger für die Eltern-Direktive. publish subscribe wird durch $ .callbacks implementiert

Andere Möglichkeiten, wie dies getan werden kann, ist Broadcast. Oder eine Kind-Direktive überwacht eine Variable und wir können diese Variable in Parent ändern.

Wir haben Broadcast nicht verwendet, weil die Eltern-Direktive viele untergeordnete Ereignisse enthält und wir nicht möchten, dass sie alle durchlaufen.

Es gibt eine andere Art und Weise wir umsetzen können dies mit Zweiweg Funktion Bindung

directives.directive('twoWayBind', function() { 
    return { 
     restrict: "E", 
     transclude: true, 
     templateUrl: 'app/twoWayBindFunction.html', 
     scope: { 
      twoWayBinding: '=' 
     }, 
     controller: 'twoWayBindFunctionController', 
     bindAsController: true, 
     controllerAs: 'vm', 
     link: function (scope, element, attrs, controller) { 
     } 
    }; 
}); 


controllers.controller('twoWayBindFunctionController', ['$scope', function (scope) { 
    var vm = this; 
    vm.scope = scope; 

    scope.twoWayBinding = function() { 
     console.log('twoway bind'); 
    }  
}]); 

wir twoWayBinding Funktion von übergeordneten Bereich aufrufen können.

Ich würde gerne verstehen, was die beste Praxis ist.

Answer 1

Ich fand den besten Weg für mich ist ein Objekt von der Eltern-Direktive an das Kind übergeben. Hinzufügen von Funktionen in der untergeordneten Anweisung zu diesem Objekt und Aufrufen des übergeordneten Objekts.

app.directive('parent', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      buttonCaption: '@' 
     }, 
     bindToController : true, 
     controllerAs : 'vm', 
     template: "<button ng-click='vm.twoWayObject.childFunc()'>{{vm.buttonCaption}}</button><child two-way-obj='vm.twoWayObject'></child>", 
     controller: function($scope) { 
      var vm = this;  
      vm.twoWayObject = {}; 
     }, 

     link: function() {    
     } 
    } 
}); 

app.directive('child', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      twoWayObj: '=' 
     }, 
     bindToController : true, 
     controllerAs : 'vm', 
     template: "<h1>Chuchi</h1>",    
     link: function() {    
     }, 
     controller: function($scope){ 
      var vm = this; 
      vm.twoWayObj.childFunc = function(){ 
       alert('child function called'); 
      } 
     } 
    } 
}); 

A fügen Sie ein Fiddle mit einem Beispiel hinzu.

Schauen Sie sich diese Frage (die erste Antwort):

How to call a method defined in an AngularJS directive?