Question

我已经知道您可以在指令中设置控制器，而其他指令可以调用该控制器上的函数。这是我当前的指令：

app.directive("foobar", function() {
  return {
    restrict: "A",
    controller: function($scope) {
      $scope.trigger = function() {
        // do stuff
      };
    },
    link: function(scope, element) {
     // do more stuff
    }
  };
});

我知道我可以这样称呼它：

app.directive("bazqux", function() {
  return {
    restrict: "A",
    require: "foobar",
    link: function(scope, element, attrs, fooBarCtrl) {
        fooBarCtrl.trigger();
    }
  };
});

但是，我希望能够从任何指令调用触发器，而不仅仅是我自己的自定义指令，如下所示：

<button ng-click="foobar.trigger()">Click me!</button>

如果这不起作用，有没有办法引入第三个指令来实现它？喜欢这个？

<button ng-click="trigger()" target-directive="foobar">Click me!</button>

谢谢！

Answer 1

听起来你需要一个有角度的服务。 http://docs.angularjs.org/guide/dev_guide.services

这将允许您跨指令共享功能。

这是一个类似的问题：Sharing data between directives

Answer 2

在任何组件之间完成应用程序范围内通信的一种简单方法是使用全局事件（从$ rootScope发出）。例如：

<强> JS：

app.directive('directiveA', function($rootScope)
{
    return function(scope, element, attrs)
    {
        // You can attach event listeners in any place (controllers, too)

        $rootScope.$on('someEvent', function()
        {
            alert('Directive responds to a global event');
        });
    };
});

<强> HTML：

<button ng-click="$emit('someEvent')">Click me!</button>

在这里，您从子范围发出一个事件，但最终会到达$rootScope并运行上一个侦听器。

以下是一个实例：http://plnkr.co/edit/CpKtR5R357tEP32loJuG?p=preview

Answer 3

当谈到irc时，事实证明沟通是不必要的：

我有一个属性限制指令，它在“触发”时对其父元素执行一些DOM操作

解决方案是将逻辑保留在同一指令中，并将dom更改应用于父级。 http://jsfiddle.net/wt2dD/5/

scope.triggerSmthOnParent = function () {
    element.parent().toggleClass('whatewer');
}

AngularJS中的指令到指令通信？

3 个答案: