Question

我有一个包含两个指令的页面。我需要在另一个指令中调用一个函数。我已将该函数添加到第一个指令的$ element对象中，并使用jQuery从另一个指令调用它。这是正确的方法还是应该使用两个指令共享的上下文对象？

//inside directive 1 link fn
$element[0].foo = function(){
console.log("test");
}

...
//inside directive 2 link fn
$('.className').foo()

这两个指令是带有共享控制器的页面上的元素。每个都有一个孤立的范围。这似乎运作良好。我有什么理由不这样做吗？

Answer 1

是共享同一个控制器的2个指令吗？如果是这样，你可以从一个指令调用控制器上的一个函数，该指令将“通知”另一个指令。或者，您可以使用活动，查看此答案here

Answer 2

这不是你应该这样做的方式。尽量避免使用$元素，它会进行缓慢的DOM操作，Angular会自行处理。要从directiveA触发的directiveB中调用函数，最好先创建一个服务。

angular.service('Communication', function () {
  var _listeners = [];

  return {
    addListener: function (callback) {
      _listeners.push(callback);
    },
    removeListener: function () {/* Clean up */},
    invokeListeners: function (data) {
      _listeners.forEach(function (listener) {
        listener(data);
      });
    }
  }
});

angular.directive('directiveB', ['Communication', function (Communication) {
  return {
    restrict: 'AE',
    scope: {},
    controller: directiveB
  };

  function directiveB (scope, element, attrs) {
    Communication.addEventListener(function (data) { /* Do stuff with data */  });
  }
}]);

angular.directive('directiveA', ['Communication', function (Communication) {
  return {
    restrict: 'AE',
    scope: {},
    controller: directiveA
  };

  function directiveA (scope, element, attrs) {
    // trigger event in directive B
    Communication.invokeListeners('test');
  }
}]);

在指令中向元素添加角度添加函数

2 个答案: