AngularJS:如何调用指令中定义的函数'控制器的作用域

AngularJS: How do I call a function defined in a directive's scope from a controller?

本文关键字：函数 定义 作用域 控制器 指令 何调用 调用 AngularJS      更新时间：2023-09-26

我需要调用一个函数，该函数属于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（我们称之为my controller），它是放置指令的视图的控制器。

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

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

EDIT 2：从Dan M.的回答开始（没有考虑mouseenter/mouseleve。只是试图让两个控制器相互通信），我通过$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

但是，在无任何情况（请参阅代码中的注释）中，会收到

事件

您可以在链接块内调用控制器函数。您还可以在指令中$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}}"
  };
});
相关文章：