Angular: Add attribute (programmatically) to element with binding

Question

I have this attribute directive which under specific conditions needs to add an attribute. But thats not all, I also want to bind the value of this attribute to a property on the $scope. In code (simplified) this looks like

...
.directive('do-magic', function ($timeout) {
    restrict: 'A',
    link: function (scope, element) {
        scope.isMagicDone = false;
        element.attr('is-magic-done', scope.isMagicDone);

        $timeout(function () {
            scope.isMagicDone = true;
        });
    }
});

So, after the $timeout executes I need the is-magic-done value to be true. So the question is: How can I setup a binding programmatically ?

score 2 · Accepted Answer · answered Jun 20 '16 at 13:34

One way to do this is to add the attribute to the directive, then $compile the directive attributes again. The trick however, is to remove the directive element before $compile; otherwise you'll have an infinite compile loop.

The result is a call to compile with only the element attributes. Note that the directive itself is not compiled again. Here's an example:

.directive('do-magic', function ($timeout, $compile) {
    restrict: 'A',
    link: function (scope, element, attrs) {
        scope.isMagicDone = false;
        attrs.$set('is-magic-done', '{{isMagicDone}}');

        $timeout(function () {
            scope.isMagicDone = true;
        });

        element.removeAttr('do-magic');
        $compile(element)(scope);
    }
});

I noticed that this solution doesn't work well if on the same element `ng-view` is defined — Jeanluca Scaljeri, Jun 21 '16 at 07:15

Angular: Add attribute (programmatically) to element with binding

1 Answers1