AngularJS – passa la funzione alla direttiva

Ho un esempio angularJS

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: "", replace: true, link: function(scope, elm, attrs) { } } });

Voglio quando faccio clic sul pulsante, verrà visualizzata la finestra di avviso, ma nulla mostra.

Qualcuno può aiutarmi?

Per chiamare una funzione di controllore nell’ambito genitore dall’interno di una direttiva di ambito isolato, utilizzare i nomi di attributi dash-separated da un dash-separated nell’HTML come detto dall’OP.

Inoltre, se vuoi inviare un parametro alla tua funzione, chiama la funzione passando un object:

  

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: "", replace: true, link: function(scope, elm, attrs) { } } }); 

Violino

Forse mi manca qualcosa, ma anche se le altre soluzioni chiamano la funzione genitore non c’è la possibilità di passare argomenti dal codice della direttiva, questo perché l’ update-fn chiama updateFn() con parametri fissi, ad esempio {msg: "Hello World"} . Un leggero cambiamento consente alla direttiva di passare argomenti, che ritengo sia molto più utile.

  

Nota che l’HTML sta passando un riferimento di funzione, cioè senza parentesi () .

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: "", replace: true, link: function(scope, elm, attrs) { scope.callUpdate = function() { scope.updateFn()("Directive Args"); } } } }); 

Quindi, in quanto sopra, l’HTML chiama la funzione callUpdate dell’ambito locale, che quindi “recupera” l’updateFn dall’ambito genitore e chiama la funzione restituita con i parametri che la direttiva può generare.

http://jsfiddle.net/mygknek2/

Nel tag Html della direttiva ‘test’, il nome dell’attributo della funzione non deve essere CamelCased, ma basato sul trattino.

così – invece di:

  

Scrivi:

  

Questo è il modo angular per distinguere tra attributi della direttiva (come funzione update-fn) e funzioni.

Che ne dici di passare la funzione controller con il binding bidirezionale ? Quindi è ansible utilizzarlo nella direttiva esattamente come in un modello normale (ho rimosso le parti non pertinenti per semplicità):

 

Sono atterrato a questa domanda, perché ho provato il metodo sopra befire, ma in qualche modo non ha funzionato. Ora funziona perfettamente.

usa il trattino e le lettere minuscole per il nome dell’attributo (come altre risposte dette):

   

E usa “=” invece di “&” nell’ambito della direttiva:

  scope: { updateFn: '='} 

Quindi puoi usare updateFn come qualsiasi altra funzione:

   

Ecco qua!

Ho dovuto usare il binding “=” invece di “&” perché non funzionava. Strano comportamento.