AngularJS - Funktion an Direktive übergeben

Ich habe ein Beispiel angleJS

<div ng-controller="testCtrl">

<test color1="color1" updateFn="updateFn()"></test>
</div>
 <script>
  angular.module('dr', [])
.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function() {
        alert('123');
    }
})
.directive('test', function() {
    return {
        restrict: 'E',
        scope: {color1: '=',
                updateFn: '&'},
        template: "<button ng-click='updateFn()'>Click</button>",
        replace: true,
        link: function(scope, elm, attrs) { 
        }
    }
});

</script>
</body>

</html>

Ich möchte, wenn ich auf die Schaltfläche klicke, wird das Warnfeld angezeigt, aber es wird nichts angezeigt.

Kann mir jemand helfen?

Verwenden Sie dash-separatedAttributnamen im HTML-Code, wie im OP angegeben, um eine Controller-Funktion im übergeordneten Bereich innerhalb einer Direktive für den isolierten Bereich aufzurufen .

Wenn Sie einen Parameter an Ihre Funktion senden möchten, rufen Sie die Funktion auf, indem Sie ein Objekt übergeben:

<test color1="color1" update-fn="updateFn(msg)"></test>

JS

var app = angular.module('dr', []);

app.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function(msg) {        
        alert(msg);
    }
});

app.directive('test', function() {
    return {
        restrict: 'E',
        scope: {
            color1: '=',
            updateFn: '&'
        },
        // object is passed while making the call
        template: "<button ng-click='updateFn({msg : \"Hello World!\"})'>
            Click</button>",
        replace: true,        
        link: function(scope, elm, attrs) {             
        }
    }
});

Fiddle

Vielleicht fehlt mir etwas, aber obwohl die anderen Lösungen die übergeordnete Bereichsfunktion aufrufen, gibt es keine Möglichkeit, Argumente aus dem Direktivencode zu übergeben. Dies liegt beispielsweise daran, dass der update-fnAufruf updateFn()mit festen Parametern ausgeführt wird {msg: "Hello World"}. Eine geringfügige Änderung ermöglicht es der Richtlinie, Argumente zu übergeben, was ich für weitaus nützlicher halte.

<test color1="color1" update-fn="updateFn"></test>

Beachten Sie, dass der HTML-Code eine Funktionsreferenz übergibt, dh ohne ()Klammern.

JS

var app = angular.module('dr', []);

app.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function(msg) {        
        alert(msg);
    }
});

app.directive('test', function() {
    return {
        restrict: 'E',
        scope: {
            color1: '=',
            updateFn: '&'
        },
        // object is passed while making the call
        template: "<button ng-click='callUpdate()'>
            Click</button>",
        replace: true,        
        link: function(scope, elm, attrs) {       
          scope.callUpdate = function() {
            scope.updateFn()("Directive Args");
          }
        }
    }
});

Im obigen Beispiel ruft der HTML- callUpdateCode die lokale Bereichsfunktion auf , die dann das updateFn aus dem übergeordneten Bereich abruft und die zurückgegebene Funktion mit Parametern aufruft, die die Direktive generieren kann.

http://jsfiddle.net/mygknek2/

In Ihrem HTML-Tag der 'test'-Direktive sollte der Attributname der Funktion nicht camelCased, sondern dash-basiert sein.

also - statt:

<test color1="color1" updateFn="updateFn()"></test>

schreiben:

<test color1="color1" update-fn="updateFn()"></test>

Auf diese Weise kann Angular den Unterschied zwischen Direktivenattributen (z. B. update-fn-Funktion) und Funktionen erkennen.

Wie wäre es, die Controller-Funktion mit bidirektionaler Bindung zu übergeben ? Dann können Sie es in der Direktive genauso verwenden wie in einer regulären Vorlage (ich habe der Einfachheit halber irrelevante Teile entfernt):

<div ng-controller="testCtrl">

   <!-- pass the function with no arguments -->
   <test color1="color1" update-fn="updateFn"></test>
</div>

<script>
   angular.module('dr', [])
   .controller("testCtrl", function($scope) {
      $scope.updateFn = function(msg) {
         alert(msg);
      }
   })
   .directive('test', function() {
      return {
         scope: {
            updateFn: '=' // '=' bidirectional binding
         },
         template: "<button ng-click='updateFn(1337)'>Click</button>"
      }
   });
</script>

Ich bin bei dieser Frage gelandet, weil ich die oben beschriebene Methode ausprobiert habe, aber irgendwie hat es nicht funktioniert. Jetzt funktioniert es perfekt.

Verwenden Sie für den Attributnamen Bindestrich und Kleinbuchstaben (wie in anderen Antworten angegeben):

 <test color1="color1" update-fn="updateFn()"></test>

Und verwenden Sie "=" anstelle von "&" im Richtlinienumfang:

 scope: { updateFn: '='}

Dann können Sie updateFn wie jede andere Funktion verwenden:

 <button ng-click='updateFn()'>Click</button>

Los geht's!

Ich musste die Bindung "=" anstelle von "&" verwenden, da dies nicht funktionierte. Seltsames Verhalten.

@JorgeGRC Danke für deine Antwort. Eines ist jedoch der "vielleicht" Teil sehr wichtig. Wenn Sie Parameter haben, müssen Sie diese auch in Ihre Vorlage aufnehmen und Ihre Einheimischen angeben, z updateFn({msg: "Directive Args"}.