AngularJS: Comment puis-je appeler une fonction définie dans la portée d'une directive à partir d'un contrôleur?

Je dois appeler une fonction qui appartient à la portée $ d'une directive ng utilisée dans mon application Angulaire.

Disons que la directive se définit comme suit:

.directive('my-directive', ['$document', '$timeout', function ($document, $timeout) { return { restrict: 'E', replace: true, scope: { // .... }, controller: ['$scope', function ($scope) { $scope.myFunction= function (mouseEnter) { // ... }; } }; }]);

Je dois appeler myFunction à partir de mon contrôleur (appelons-le mon contrôleur ) qui est le contrôleur de la vue où ma directive est placée.

Est-il possible de le faire? (Éventuellement modifiant la directive)

EDIT : La question déjà répondu fournie (proposée pour la modification) est similaire à la mienne, ce n'est pas clair pour moi ou il ne résout pas apparemment le problème spécifique que j'ai proposé.

ÉDIT 2 : à partir de la réponse de Dan M. (sans prendre en compte le mouse / mouseleave en essayant de faire communiquer les deux contrôleurs), j'ai transmis mon événement au contrôleur de ma directive via $ rootScope (car il n'y a pas de parent – relation d'enfant entre les deux contrôleurs) par:

 console.log("let's broadcast the event.."); // this is printed $rootScope.$broadcast('callDirectiveControllersFunction'); // I even tried with $scope in place of $rootScope and $emit in place of $broadcast

Et en le recevant (au sein du contrôleur de la directive) par:

 var myFunction = function(){ // ... } $scope.$on('callDirectiveControllersFunction', function (){ console.log("event received"); // this is not printed callMyFunction(); }); // I even tried using $rootScope in place of $scope

Cependant, en aucun cas (voir les commentaires dans le code), l'événement est reçu

Vous pouvez appeler une fonction de contrôleur dans le bloc de liaison. Vous pouvez également émettre un événement dans la directive et l'écouter dans le contrôleur (peut-être qu'il existe un cas d'utilisation pour cela).

Il semble que vous voulez l'appeler sur le mouseenter . Vous pouvez le faire en liant à l'événement mouseenter dans le lien de directive. La capture est nécessaire pour appliquer les modifications. Jetez un oeil au code de code suivant, qui contient les 3 exemples: http://jsbin.com/cuvugu/8/ . (Également collé ci-dessous)

Astuce: Vous voudrez peut-être faire attention à la façon dont vous nommez vos directives. Pour utiliser une directive comme directive my-directive vous devez la nommer comme myDirective .

 var app = angular.module('App', []); app.directive('myDirective', function () { function directiveLink(scope){ scope.$emit('customEvent'); } return { restrict: 'EA', scope: {}, link: directiveLink, controller: function ($scope) { $scope.bar = 'bar'; $scope.myFunction = function () { $scope.bar = 'foobar1'; }; $scope.$on('customEvent', function (){ $scope.myFunction(); }); }, template: "Foo {{bar}}" }; }); app.directive('anotherDirective', function () { function directiveLink(scope){ scope.myFunction(); } return { restrict: 'EA', scope: {}, link: directiveLink, controller: function ($scope) { $scope.bar = 'bar'; $scope.myFunction = function () { $scope.bar = 'foobar2'; }; }, template: "Foo {{bar}}" }; }); app.directive('mouseDirective', function () { function directiveLink(scope, element){ element.bind('mouseenter', function(){ scope.$apply(function(){ scope.myFunction(); }); }); element.bind('mouseleave', function(){ scope.$apply(function(){ scope.myOtherFunction(); }); }); } return { restrict: 'EA', link: directiveLink, controller: function ($scope) { $scope.bar = 'no'; $scope.myFunction = function () { $scope.bar = 'yes'; }; $scope.myOtherFunction = function () { $scope.bar = 'no'; }; }, template: "Mouse Enter: {{bar}}" }; });

J'ai également inclus un exemple avec un contrôleur distinct dans le lien JS Bin. Cela ne change rien, mais cela semble être une partie importante de votre question. Voici le bloc de code:

 var app = angular.module('App', []); app.controller('myController', function($scope){ $scope.bar = 'foo'; $scope.myFunction = function(){ $scope.bar = 'foobar3'; }; }); app.directive('lastDirective', function () { function directiveLink(scope){ scope.myFunction(); } return { restrict: 'EA', scope: {}, link: directiveLink, controller: 'myController', template: "Foo {{bar}}" }; });