12

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

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>

谢谢！

4

3 回答 3

8

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

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

这是一个类似的问题：在指令之间共享数据

于 2013-05-18T20:35:40.290 回答
6

完成任何组件之间的应用程序范围通信的一种简单方法是使用全局事件（从 $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

于 2013-05-18T21:38:57.963 回答
1

在 irc 上交谈时，结果发现通信是不必要的：

我有一个属性限制指令，当它被“触发”时，它会在它的父元素上执行一些 DOM 操作

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

scope.triggerSmthOnParent = function () {
    element.parent().toggleClass('whatewer');
}
于 2013-05-18T21:36:20.113 回答