Javascript AngularJS：如何调用指令中定义的函数'；控制器的作用域是什么？

我需要调用一个函数，它属于我的Angular应用程序中使用的ng指令的$scope

假设指令的定义如下：

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

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

我需要从我的控制器调用myFunction（我们称之为mycontroller），它是放置我的指令的视图的控制器

有可能吗？（最终修改指令）

编辑：提供的已回答问题（建议编辑）与我的问题类似，因为我不清楚，或者它显然没有解决我提出的具体问题

编辑2：从Dan M.answer开始（没有考虑mouseenter/mouseleave。只是试图让两个控制器相互通信），我通过$rootScope将我的事件广播到指令的控制器（因为两个控制器之间没有父子关系）作者：

并通过以下方式接收（在指令的控制器内）：

---

但是，在任何情况下（参见代码中的注释）都不会收到事件

您可以在链接块内调用控制器函数。您还可以在指令中创建一个事件，并在控制器中侦听它（可能有这样的用例）

您似乎想在

mouseenter

上调用它。您可以通过绑定到指令链接中的

mouseenter

事件来实现这一点。关键是你需要应用这些变化。 请看下面的代码，其中包含所有3个示例：。（也贴在下面）

提示：您可能需要注意如何命名指令。要将指令命名为

myDirective

，需要将其命名为

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

---

我在问之前看到了答案。然而，我并不清楚，这似乎给我的（简单的）问题增加了某种程度的复杂性。答案有点长，我现在专注于项目的另一部分。但我肯定会在接下来的几天内尝试您的解决方案，然后我会接受您的回答/询问其他问题。首先，我为反馈太晚而道歉。请看我问题中的“编辑2”。谢谢你，阿加尼终于决定创建一个新问题。如果你愿意，请随意回答，如果它解决了我的问题，我会很乐意接受。

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

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