AngularJS – passe a function para diretiva

Eu tenho um exemplo 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) { } } });

Eu quero quando eu clicar no botão, a checkbox de alerta irá aparecer, mas nada aparece.

Alguém pode me ajudar?

   

Para chamar uma function de controlador no escopo pai de dentro de uma diretiva de escopo isolate, use nomes de atributos dash-separated no HTML, como o OP disse.

Além disso, se você quiser enviar um parâmetro para sua function, chame a function passando um 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

Talvez eu esteja faltando alguma coisa, mas embora as outras soluções chamem a function de escopo pai não há capacidade de passar argumentos do código da diretiva, isso ocorre porque o update-fn está chamando updateFn() com parâmetros fixos, por exemplo {msg: "Hello World"} . Uma pequena mudança permite que a diretiva passe argumentos, o que eu acho que é muito mais útil.

  

Observe que o HTML está passando uma referência de function, ou seja, sem colchetes () .

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"); } } } }); 

Portanto, no callUpdate acima, o HTML está chamando a function callUpdate escopo local, que então “busca” o updateFn do escopo pai e chama a function retornada com parâmetros que a diretiva pode gerar.

http://jsfiddle.net/mygknek2/

Na tag Html da diretiva ‘teste’, o nome do atributo da function não deve ser camelCased, mas baseado em traço.

então – em vez de:

  

Escreva:

  

Este é o modo angular de distinguir entre os atributos da diretiva (como a function update-fn) e as funções.

Como sobre a passagem da function do controlador com binding bidirecional ? Então você pode usá-lo na diretiva exatamente da mesma maneira que em um modelo regular (eu tirei peças irrelevantes para simplificar):

 

Cheguei a esta questão, porque eu tentei o método acima befire, mas de alguma forma não funcionou. Agora funciona perfeitamente.

use traço e minúscula para o nome do atributo (como outras respostas disseram):

   

E use “=” em vez de “&” no escopo da diretiva:

  scope: { updateFn: '='} 

Então você pode usar o updateFn como qualquer outra function:

   

Ai está!

Eu tive que usar a binding “=” em vez de “&” porque isso não estava funcionando. Comportamento estranho.