AngularJS-Direktive, die eine Funktion mit mehreren Argumenten bindet

Question 1

Ich habe Probleme beim Binden einer in einem Controller definierten Funktion mit einer Rückruffunktion in einer Direktive. Mein Code sieht folgendermaßen aus:

In meinem Controller:

$scope.handleDrop = function ( elementId, file ) {
    console.log( 'handleDrop called' );
}

Dann meine Anweisung:

.directive( 'myDirective', function () {
    return {
      scope: {
        onDrop: '&'
      },
      link: function(scope, elem, attrs) {
        var myFile, elemId = [...]

        scope.onDrop(elemId, myFile);
      }
    } );

Und auf meiner HTML-Seite:

<my-directive on-drop="handleDrop"></my-directive>

Ich habe kein Glück mit dem obigen Code. Nach dem, was ich in verschiedenen Tutorials gelesen habe, soll ich die Argumente auf der HTML-Seite angeben.

Question 2

Es gibt einen kleinen Fehler in Ihrem Code. Bitte versuchen Sie den folgenden Code und er sollte für Sie funktionieren

<!doctype html>
<html ng-app="test">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>

  </head>
 <body ng-controller="test" >    


<!-- tabs -->
<div my-directive on-drop="handleDrop(elementId,file)"></div>

 <script>
     var app = angular.module('test', []);

     app.directive('myDirective', function () {
         return {
             scope: {
                 onDrop: '&'
             },
             link: function (scope, elem, attrs) {
                 var elementId = 123;
                 var file = 124;
                 scope.onDrop({elementId:'123',file:'125'});

             }
         }
     });

     app.controller('test', function ($scope) {
         alert("inside test");
         $scope.handleDrop = function (elementId, file) {
             alert(file);
         }
     });

   </script>
</body>


</html>

Question 3

Alternative Methode, die die Minifizierung überlebt

Lassen Sie Ihr HTML wie es war:

<my-directive on-drop="handleDrop"></my-directive>

Ändern Sie den Anruf in:

scope.onDrop()('123','125')

Beachten Sie die zusätzlichen öffnenden und schließenden Klammern für onDrop. Dadurch wird die Funktion instanziiert, anstatt den Funktionscode einzufügen.

Warum ist es besser?

handleDrop()Wenn Sie die Namen der Parameter in der Definition ändern (oder sogar weitere hinzufügen, wenn Sie richtig damit umgehen), werden Sie nicht jede der Direktiveninjektionen im HTML ändern. viel trockener.
Wie @TrueWill vorgeschlagen hat, bin ich mir fast sicher, dass die anderen Lösungen die Minifizierung nicht überleben werden, während der Code auf diese Weise bei maximaler Flexibilität bleibt und namenunabhängig ist.

Ein weiterer persönlicher Grund ist die Objektsyntax, mit der ich viel mehr Code schreibe:

functionName({xName: x, yName: y}) // (and adding the function signature in every directive call)

Im Gegensatz zu

functionName()(x,y) // (zero maintenance to your html)

Ich habe diese großartige Lösung hier gefunden .