从$rootScope-AngularJS中的指令调用函数

Call function from directive in $rootScope - AngularJS

本文关键字：指令 调用 函数 rootScope-AngularJS      更新时间：2023-09-26

我想做的事情：

我正在尝试在一个可以从$rootScope调用的指令中创建一个函数。

问题：

它似乎只处理DOM中具有此指令的最后一个项。我猜，每次运行该指令时，rootScope.myFunction都会被覆盖。

问题：

如何在$rootScope中创建一个函数，当调用该函数时，该函数将为每个指令运行内部函数，而不仅仅是最后一个指令？

相关代码：

(function() {
  angular.module('home')
    .directive('closeBar', closeBar);
  closeBar.$inject = ['$rootScope', '$window'];
  function closeBar(rootScope, window) {
    return {
      scope: true,
      restrict: 'A',
      link: function(scope, element, attrs) {
        var myFunction = function() {
          // do stuff
        };
        myFunction();
        rootScope.myFunction = function() {
          myFunction();
        };
      }
    };
  }
})();

然后在另一个脚本中，我想调用：

rootScope.myFunction();

注意，我不允许分享我正在处理的项目中的实际代码，所以这是一个更一般的问题，与特定的用例无关

一个简单的解决方案是在rootScope中创建一个特殊的函数，该函数接受函数作为参数，并将其推送到一个数组中，之后您将能够调用该函数，它将调用所有注册的函数。

 angular.module('myApp').run(['$rootScope', function($root) {
      var functionsToCall = [];
      $root.registerDirectiveFunction = function(fn, context) {
          context = context || window;
          functionsToCall.push({fn: fn, context: context});
      }
      $root.myFunction = function(args) {
          functionsToCall.forEach(function(fnObj) {
              fnObj.fn.apply(fnObj.context,args);
          });
      }
 }

在你的指令中：

 link: function($scope, $el, $attr) {
      function myFunct() {
      }
      $scope.$root.registerDirectiveFunction(myFunct, $scope);
      //call it if you want
      $scope.$root.myFunction();
 }

这应该涵盖您的场景。

相关文章：