AngularJS: Add attribute, compile directive

Question

Is it possible to somehow add directive as simple attribute in compile function and let angular handle compiling of added directive?

Provided example bellow obviously does not work, but my proper question would be, what is the cleanest way to achieve that?

var app = angular.module('app', []);

app.directive('testOne', function ($compile) {
  return {
    restrict: 'A',
    priority: 10000,
    compile: function (element, attrs) {
      
      element.attr('test-two', '');
    }
  };
});

app.directive('testTwo', function () {
  return {
    restrict: 'A',
    priority: 10,
    compile: function (element, attrs) {
      console.log(2);
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">


  <div test-one></div>


</div>

sshow · Accepted Answer · 2016-04-30 23:05:41Z

4

In the link phase, you can call $compile(element)(scope) to recompile the element to allow AngularJS to pick up the newly added directive. However, to prevent an infinite loop (since your initial directive will also be re-compiled), you should remove the initial directive's attribute first:

link: function (scope, element) {
    element.removeAttr('test-one');
    element.attr('test-two', '');

    $compile(element)(scope);
}

Edit: You may also want to set terminal: true on your initial directive to prevent other directives from kicking in before your attribute massaging is done. You may also have to play around with the priority of the directive for similar reasons.

edited Apr 30, 2016 at 23:05

sshow

9,1745 gold badges54 silver badges83 bronze badges

answered Nov 23, 2015 at 15:58

Ateş Göral

141k27 gold badges142 silver badges191 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Clem Over a year ago

Ok so this is the cleanest way :) I wanted to know if I can somehow avoid multiple compilations. Thanks!

Clem Over a year ago

Another question if you know answer perhaps. How can I programatically change attribute of an element so that $observe in another directive will trigger? I tried attrs.$set and no luck.

Ateş Göral Over a year ago

If the directive is not actively watching for changes to the attribute expression, you're out of luck. I'd peek into to source code of the other directive (if it's not your directive) and see if there's any watching going on.

Clem Over a year ago

Yes, except another $compile :) don't like this though..:) Thanks

Jerod Houghtelling Over a year ago

+1 @AtesGoral "to prevent an infinite loop (since your initial directive will also be re-compiled), you should remove the initial directive's attribute first" - Thank You

Collectives™ on Stack Overflow

AngularJS: Add attribute, compile directive

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related