指令中的$ element的角度加法函数

Question

I have a page with two directives. I need to invoke a function in one directive from the other. I have added the function to the $element object of the first directive and used jQuery to invoke it from the other. Is this the right approach or should I be using a context object shared by both directives?

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

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

The two directives are elements on a page with a shared controller. Each has an isolated scope. This seems to work well. Are there any reasons why I should not do this?

Answer 1

are the 2 directives sharing the same controller? If so, you could call a function on the controller from one directive which would "notify" the other. Or, you could use events, check this answer here

Answer 2

This is not the way you should do it. Try to avoid using $element, it does DOM manipulations which are slow and Angular takes care of by itself. To invoke a function in directiveB, triggered from directiveA, you better make a service.

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');
  }
}]);