Angular Directive Bind-Funktion mit & nicht übergeben Argumente zum Controller

Question

Ich habe eine Direktive, die mit Box file picker interagiert. Meine Anweisung wird von zwei separaten Controllern verwendet, mit der Möglichkeit, in Zukunft weitere hinzuzufügen.

Box Dateiauswahl können Sie eine Callback-Funktion gesetzt, sobald der Benutzer eine Datei/Ordner auswählt, wie folgt aus:

var boxSelect = new BoxSelect(); 
// Register a success callback handler 
boxSelect.success(function(response) { 
    console.log(response); 
}); 

Meine Controller die Richtlinie verwenden und sie haben den Erfolg Callback-Logik als Rahmen Variablen, die Ich gehe zur Richtlinie über.

habe ich eine plunkr, wo ich die Box wählen Verhalten bin spöttischen

-Controller

.controller('myController', function($scope) { 
    $scope.onSuccessful = function(message) { 
    alert('Success! Message: ' + message); 
    }; 
}) 

Richtlinie

angular.module('myApp', []) 
    .controller('myController', function($scope) { 
    $scope.onSuccessful = function(message) { 
     //message is undefined here 
     alert('Success! Message: ' + message); 
    }; 
    }) 
    .directive('myDirective', function() { 
    return { 
     restrict: 'A', 
     scope: { 
     success: '&' 
     }, 
     link: function(scope, element) { 

     //third party allows to subscribe to success and failure functions 
     function ThirdPartySelect() { 

     } 

     ThirdPartySelect.prototype.success = function(callback) { 
      this.callback = callback; 

     }; 

     ThirdPartySelect.prototype.fireSuccess = function() { 
      this.callback({ 
      foo: 'bar' 
      }); 
     }; 

     var myThirdPartyInstance = new ThirdPartySelect(); 
     myThirdPartyInstance.success(function(message) { 
      //message is still defined here, but not in the controller 
      scope.success(message); 
     }); 

     element.on('click', function() { 
      myThirdPartyInstance.fireSuccess(); 
     }); 

     } 
    }; 
    }); 

Ansicht

<div ng-controller="myController"> 
    <button my-directive success="onSuccessful(arg)">Test</button> 
</div> 

Die Callback-Funktion wird in der Steuerung, aber die Argumente genannt nicht definiert sind.

konnte ich dieses Problem beheben, indem ‚=‘ anstelle von ‚&‘, aber ich würde gerne wissen, warum es nicht mit ‚&‘ arbeitet, da es angeblich für method binding

Answer 1

verwendet werden

Ja, um eine Controllerfunktion an Ihre Anweisung zu binden, müssen Sie die & Bindings (Ausdrucksbindung) verwenden, die es der Direktive ermöglicht, einen Ausdruck oder eine Funktion aufzurufen, die durch ein DOM-Attribut definiert ist.

Aber in Ihrer Direktive, wenn Sie Ihre binded-Methode aufrufen, sollte der Funktionsparameter ein Objekt sein, bei dem der Schlüssel derselbe Parameter ist, den Sie in Ihrem Controller deklarieren, wenn Sie Ihre Funktion definieren.

So in Ihrer Richtlinie, Sie ersetzen müssen:

scope.success(message); 

von:

scope.success({message:message.foo}); 

Dann in Ihrem HTML, haben Sie zu ersetzen:

<button my-directive success="onSuccessful(arg)">Test</button> 

von:

<button my-directive success="onSuccessful(message)">Test</button> 

können Sie die Working Plunker