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

Question

我想做什么:

我正在尝试在指令中创建一个可以从 $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();

---

请注意，我不允许分享我正在从事的项目的实际代码，因此这是一个与特定用例无关的更普遍的问题。

Answer 1

一个简单的解决方案是在你的 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();
 }

这应该涵盖您的场景。