AngularJS: Как мне вызвать функцию, определенную в области действия директивы от контроллера?

Question

Мне нужно вызвать функцию, которая относится к $ scope директивы ng, используемой в моем угловом приложении.

Скажем, директива определяется следующим образом:

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

      $scope.myFunction= function (mouseEnter) { 
       // ... 
      }; 
     } 
    }; 
}]); 

Мне нужно позвонить MYFUNCTION от моего контроллера (назовем его мой-контроллер), который является контроллером представления, где моя директива размещен.

Возможно ли это? (в конечном счете, изменяя директиву)

РЕДАКТИРОВАТЬ: Ответ на уже предоставленный вопрос (предложенный для редактирования) похож на мой, поскольку он не ясен для меня или, по-видимому, не решает конкретной проблемы, которую я предложил.

EDIT 2: от Dan M. ответа (. Без учета MouseEnter/MouseLeave в рассмотрении просто пытаемся сделать два контроллера сообщается друг с другом), я в эфир моего события контроллера моей директивы через $ rootScope (как там нет родитель-ребенок связь между двумя контроллерами) с помощью:

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 

и receving его (в регуляторе директивы) по:

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 

Однако в ни одного случая (см комментарии в коде) событие получено

Answer 1

Вы можете вызвать функцию контроллера внутри блока связи. Вы также можете указать $emit событие в директиве и прослушать его в контроллере (возможно, для этого есть вариант использования).

Кажется, что вы хотите назвать это на mouseenter. Вы можете сделать это, привязав к событию mouseenter в директивной ссылке. Захват - это необходимость применить изменения. Взгляните на следующий фрагмент кода, который содержит все 3 примера: http://jsbin.com/cuvugu/8/. (также вставлено ниже)

Совет. Возможно, вы захотите обратить внимание на то, как вы называете свои директивы. Чтобы использовать директиву как my-directive, вам необходимо назвать это как 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}}" 
    }; 
}); 

Я также включил пример с отдельным контроллером в ссылке JS Bin. Это ничего не меняет, но, похоже, это важная часть вашего вопроса. Вот кодовый блок:

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