AngularJS：如何從控制器調用在指令范圍內定義的函數？

Question

我需要調用一個函數，該函數屬於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 ，該控制器是放置我的指令的視圖的控制器。

有可能做到嗎？ （最終修改指令）

編輯 ：提供的已經回答的問題（建議進行編輯）與我的問題類似，因為我不清楚，或者它顯然無法解決我提出的特定問題。

編輯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

並通過以下方式將其刪除（在指令的控制器內）：

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