Угловой: добавить атрибут (программно) к элементу со связыванием

Question

У меня есть эта директива атрибута, которая при определенных условиях должна добавить атрибут. Но это не все, я также хочу привязать значение этого атрибута к свойству на $scope. В коде (упрощенно) это выглядит как

... 
.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; 
     }); 
    } 
}); 

Таким образом, после того, как $timeout выполняет мне нужно значение is-magic-done быть true. Поэтому возникает вопрос: как я могу настроить привязку программно?

Answer 1

Один из способов сделать это - добавить атрибут в директиву, затем $compile атрибуты директивы снова. Однако трюк заключается в том, чтобы удалить элемент директивы до $compile; в противном случае у вас будет бесконечный цикл компиляции.

В результате возникает запрос на компиляцию только с атрибутами элемента. Обратите внимание, что сама директива еще не скомпилирована. Вот пример:

.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); 
    } 
});