How can I get the calling element inside a directory factory function?

Question

How can I get the calling element inside a directory factory function?

How do I get the value for callingElement below?

myModule.directive('SomeDirective',function(){
   var callingElement = ? // I want to get the current element here
   var typeAttribute = callingElement.getAttribute('type');
   switch (typeAttribute) {
       'typeA':
           return typeAFactory();
   }
});

How can I do this?

My aim is to get hold of the element attributes in order to redirect the call to a factory function, according to the value of the type attribute of the calling element

angularjs
angularjs-directive

Answer 1

Your directive might contain a link function which will contain the underlying DOM element:

myModule.directive('SomeDirective', function() {
    return {
        link: function(scope, element, attrs) {
            // element will contain the underlying DOM element
        }
    }
});

Answer 2

Your directive function should return either the linking function or an object in accordance with Angular directive API. In the linking function, you can get a hold of $scope, $element, $attributes, and ngModelCtrl (optional).

$element is what you want. Note that it's not a normal DOM element. If you have jQuery in your application, it will be a jQuery element. If you don't, it will be a jqLite element (jqLite is a simpler version of jQuery).

So your final directive might look something like:

angular.module('someApp', [])
  .directive('someDirective',  
    function(factoryA, factoryB) {

      function link($scope, $element, $attributes) {
        switch($element.val()) {
          case 'a':
            return factoryA
          case 'b':
            return factoryB
        }
      }

    return {
      link: link
    }
  }
)

Note how you can inject factories in the directive. So go ahead and inject the factories that you wanna use in there.

Answer 3

Bah. I've been thinking about this all wrong.

The answer is no, I can't get the calling element inside the directive factory. The reason is that the factory is called only once, early in the compilation process, to get the directive object itself (returned from the factory).

The returned directive object is what gets used for each directive instance, so I'll have to work with that (compile, constructor, template function, pre and post link functions).