Dynamically add/remove directive from an html element

Question

How to dynamically remove and add directive to one element in javascript? Why it's not possible to do that with setAttribute() and removeAttribute() if in directive definition there is: restrict: 'A'?

setAttribute / removeAttribute only handles string attributes on a dom element. You are trying to manipulate angular outside of angular. I thnik there is a way to notify angular about dom changes done outside of the framewrok, but I'm not sure how its done. — mrak, Apr 15 '15 at 08:49
you need to use $compile if u r adding or removing attribute directives — harishr, Apr 15 '15 at 09:06

score 0 · Answer 1 · answered Apr 15 '15 at 08:49

0

You can prepend the ng-if directive on your element. Take in to account that ng-if directive creates a new scope.

<div your-directive ng-if="ctrl.displayDirective" > </div>

answered Apr 15 '15 at 08:49

Raulucco

3,406
1
21
27

score 0 · Answer 2 · edited May 23 '17 at 12:06

0

to add a new directive as an attribute

angular.module('app')
  .directive('parentDirective', function ($compile) {
    return {
      restrict: 'E',
      link: function link(scope,element, attrs) {
        element.attr('child-directive', 'value');
        $compile(element)(scope);
      }
    };
  });

Dynamically add/remove directive from an html element

2 Answers2