直接在同级指令上调用方法

Question

如果特定指令的 ID 已知，是否可以直接在特定指令上调用方法？我知道如何通过侦听器事件（广播或发射）来做到这一点。我想我可以使用 jQuery 进行操作，但我希望只能通过 Angular 进行操作。另外，我想避免监听事件，因为该指令的每个实例都必须确定该特定事件是否“属于”它们，这似乎是“浪费的”。

HTML

<custom-element ce-Id="5"></custom-element>
<custom-element ce-Id="6"></custom-element>
<custom-element ce-Id="7"></custom-element>
<custom-element ce-Id="8"></custom-element>
<custom-element ce-Id="9"></custom-element>
<custom-element ce-Id="10"></custom-element>

所以使用上面的例子，指令 ce-Id="6" 上的事件（比如点击事件）是否有可能在不使用侦听器的情况下触发特定于 ce-Id="7" 上发生的事情？

Answer 1

您可以在指令的工厂函数中定义自定义 API 并跟踪订阅者。此代码只会运行一次。也可以将其移动到服务中。

例子：

app.directive('customElement', function() {

  var subscribers = {};

  var subscribe = function(id, callback) {
    subscribers[id] = callback;
  };

  var unsubscribe = function(id) {
    subscribers[id] = null;
  };

  var notify = function(id) {
    var target = parseInt(id) + 1;
    var action = subscribers[target];
    if (action) action();
  };

  var api = {
    subscribe: subscribe,
    unsubscribe: unsubscribe,
    notify: notify
  };

  return {
    restrict: 'E',
    template: '<div>I am custom element: {{ ceId }}</div>',
    scope: {
      ceId: '@',
    },
    link: function(scope, element, attrs) {

      var id = scope.ceId;

      if (!id) return;

      var onReceive = function() {
        console.log('customElement ' + id + ' has received notification.');
      };

      api.subscribe(id, onReceive);

      var onClick = function() {
        scope.$apply(function () {
          api.notify(id);
        });
      };

      element.on('click', onClick);

      scope.$on('$destroy', function() {
        element.off('click', onClick);
        api.unsubscribe(id);
      });
    }
  };
});

演示：http://plnkr.co/edit/2s1bkToSuHPURQUcvZcd?p=preview