角：バインディングを持つ要素に（プログラムで）属性を追加します。

Question

特定の条件で属性を追加する必要があるこの属性ディレクティブがあります。しかし、それはすべてではありません、私はまた、この属性の値を$scopeのプロパティにバインドしたいと思います。 $timeoutは私がtrueすべきis-magic-done値を必要とする実行後コード（簡体字）で、これは、そう

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

のように見えます。だから問題は：どのようにプログラムでバインドをセットアップできますか？

Answer 1

これを行う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); 
    } 
});