Question

如果知道该特定指令的ID，是否可以直接在特定指令上调用方法？我知道如何通过监听器事件（广播或发射）来做到这一点。我想我可以使用jQuery进行操作，但我希望只能通过Angular来完成。另外，我想避开听众活动，因为它看起来很浪费＆＃34;对于该指令的每个实例，必须确定该特定事件是否属于＆＃34;他们。

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 =＆＃34; 6＆＃34; （比如一个点击事件）触发某些特定事件发生在ce-Id =＆＃34; 7＆＃34;没有使用听众？

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

直接在Sibling指令上调用方法

1 个答案: