AngularJS – passer la fonction à la directive

J’ai un exemple angularJS

angular.module('dr', []) .controller("testCtrl", function($scope) { $scope.color1 = "color"; $scope.updateFn = function() { alert('123'); } }) .directive('test', function() { return { ressortingct: 'E', scope: {color1: '=', updateFn: '&'}, template: "", replace: true, link: function(scope, elm, attrs) { } } });

Je veux quand je clique sur le bouton, la boîte d’alerte apparaîtra, mais rien ne s’affiche.

Quelqu’un peut-il m’aider?

Pour appeler une fonction de contrôleur dans la scope parent depuis une directive de scope d’isolat, utilisez dash-separated noms d’atsortingbut dash-separated dans le code HTML, comme indiqué par l’OP.

Aussi, si vous voulez envoyer un paramètre à votre fonction, appelez la fonction en passant 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 { ressortingct: 'E', scope: { color1: '=', updateFn: '&' }, // object is passed while making the call template: "", replace: true, link: function(scope, elm, attrs) { } } }); 

Violon

Il me manque peut-être quelque chose, mais bien que les autres solutions appellent la fonction de scope parent, il est impossible de transmettre des arguments à partir du code de la directive, car update-fn appelle updateFn() avec des parameters fixes, par exemple {msg: "Hello World"} . Un léger changement permet à la directive de passer des arguments, ce qui me paraît beaucoup plus utile.

  

Notez que le code HTML passe une référence de fonction, c’est-à-dire sans crochets () .

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 { ressortingct: '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"); } } } }); 

Donc, dans ce qui précède, le code HTML appelle la fonction callUpdate scope locale, qui «récupère» le updateFn de la scope parent et appelle la fonction renvoyée avec les parameters que la directive peut générer.

http://jsfiddle.net/mygknek2/

Dans votre balise HTML de directive ‘test’, le nom d’atsortingbut de la fonction ne doit pas être camelCased, mais basé sur des tirets.

alors – au lieu de:

  

écrire:

  

C’est la manière angular de faire la différence entre les atsortingbuts de directive (tels que la fonction update-fn) et les fonctions.

Que diriez-vous de passer la fonction de contrôleur avec la liaison bidirectionnelle ? Ensuite, vous pouvez l’utiliser dans la directive de la même manière que dans un modèle standard (j’ai supprimé des parties non pertinentes pour plus de simplicité):

 

J’ai atterri à cette question, parce que j’ai essayé la méthode ci-dessus, mais cela n’a pas fonctionné. Maintenant cela fonctionne parfaitement.

utilisez le tiret et les minuscules pour le nom de l’atsortingbut (comme d’autres réponses le disent):

   

Et utilisez “=” au lieu de “&” dans la scope de la directive:

  scope: { updateFn: '='} 

Ensuite, vous pouvez utiliser updateFn comme toute autre fonction:

   

Voilà!

J’ai dû utiliser la liaison “=” au lieu de “&” car cela ne fonctionnait pas. Comportement étrange.