AngularJS – pasar la función a la directiva

Tengo un ejemplo 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) { } } });

Quiero cuando haga clic en el botón, aparecerá el cuadro de alerta, pero no se mostrará nada.

¿Alguien puede ayudarme?

Para llamar a una función de controlador en el ámbito primario desde dentro de una directiva de scope aislado, use nombres de atributos dash-separated en el HTML, como dijo el OP.

Además, si desea enviar un parámetro a su función, llame a la función pasando un objeto:

  

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

Violín

Tal vez me falta algo, pero aunque las otras soluciones llaman a la función de scope principal no hay posibilidad de pasar argumentos del código de la directiva, esto se debe a que update-fn está llamando a updateFn() con parámetros fijos, por ejemplo, {msg: "Hello World"} . Un ligero cambio permite que la directiva transmita argumentos, lo que creo sería mucho más útil.

  

Tenga en cuenta que el HTML está pasando una referencia de función, es decir, sin () corchetes.

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

Por lo tanto, en el callUpdate anterior, el HTML llama a la función de scope local callUpdate , que luego ‘recupera’ la actualizaciónFn del scope principal y llama a la función devuelta con parámetros que la directiva puede generar.

http://jsfiddle.net/mygknek2/

En su etiqueta Html de la directiva ‘test’, el nombre de atributo de la función no debe ser camelCased, sino basado en dash.

Entonces, en lugar de:

  

escribir:

  

Esta es la forma de angular para distinguir entre los atributos de directivas (como la función update-fn) y las funciones.

¿Qué hay de pasar la función del controlador con enlace bidireccional ? Entonces puede usarlo en la directiva exactamente de la misma manera que en una plantilla normal (eliminé las partes irrelevantes por simplicidad):

 

Aterricé a esta pregunta, porque probé el método anterior, pero de alguna manera no funcionó. Ahora funciona perfectamente.

usa guiones y minúsculas para el nombre del atributo (como dicen otras respuestas):

   

Y use “=” en lugar de “&” en el scope de la directiva:

  scope: { updateFn: '='} 

Luego puede usar updateFn como cualquier otra función:

   

¡Aquí tienes!

Tuve que usar el enlace “=” en lugar de “&” porque eso no estaba funcionando. Comportamiento extraño.