由网友(可惜卟是迩)分享简介：我需要调用属于我的角度应用中使用的NG-指令的范围$的函数。I need to call a function which belongs to the $scope of a ng-directive used in my Angular application.假设该指令是这样定义的：Let's say th...

我需要调用属于我的角度应用中使用的NG-指令的范围$的函数。

I need to call a function which belongs to the $scope of a ng-directive used in my Angular application.

假设该指令是这样定义的：

Let's say the directive is defined like this:

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

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

我需要调用的 myFunction的从我的控制器（姑且称之为我控制器），这是我的指令被放置在视图的控制器。

I need to call myFunction from my controller (let's call it my-controller) which is the controller of the view where my directive is placed.

是否有可能呢？ （最终修改指令）

Is it possible to do it? (eventually modifying the directive)

修改：所提供的已经回答的问题（建议编辑）类似于矿用它我不清楚或不很明显解决我提出的具体问题。

EDIT : The already answered question provided (proposed for edit) is similar to mine by it's not clear to me or it doesn't apparently solve the specific problem I proposed.

编辑2 ：从丹M.答案开始（不考虑考虑的mouseenter /鼠标离开只是试图让两个控制器相互沟通），我通过广播我的事件给我的指令的控制器 $ rootScope （因为有有两个控制器之间不存在父子关系）是：

EDIT 2: starting from Dan M. answer (without taking mouseenter/mouseleave in consideration. just trying to make the two controllers communicate with each other), I broadcasted my event to my directive's controller through $rootScope (as there is there is no parent-child relation between the two controllers) by:

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它（该指令的控制器内）：

and by receving it (within the directive's controller) by:

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

然而，在无一例（见code评论）收到事件

However in no case (see comments in code) the event is received

推荐答案

您可以拨打链接块内的控制器功能。您也可以 $发出在指令的事件，听在控制器中它（也许还有一个用例这一点）。

You can call a controller function inside the link block. You can also $emit an event in the directive and listen to the it in the controller (maybe there is a use case for that).

看来你要调用它的mouseenter 。您可以通过绑定到该指令链接的mouseenter 事件做到这一点。美中不足的是，你需要$应用更改。看看下面的一段code的，它包含了所有3个例子：的http：// jsbin。 COM / cuvugu / 8 / 。 （也低于粘贴）

It seems that you want to call it on mouseenter. You can do that by binding to the mouseenter event in the directive link. The catch is you need to $apply the changes. Take a look at the following piece of code, which contains all 3 examples: http://jsbin.com/cuvugu/8/. (also pasted below)

提示：您可能要注意你是如何命名的指令。要使用指令，因为我-指令你需要把它的名称 myDirective 。

Tip: You might want to pay attention to how you name your directives. To use a directive as my-directive you need to name it as 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滨链路的不同控制器的例子。这并没有真正改变什么，但它似乎是你的问题的一个重要组成部分。这里的code座：

I also included an example with a distinct controller in the JS Bin link. That doesn't really change anything, but it seems to be an important part of your question. Here's the code block:

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