Angularjs：ng-repeatを動的にコンパイルします。

Question

Angularjsでいくつかの奇妙な動作が見つかりました。私の指示は単に私のdom要素にng-repeatを追加してコンパイルします。ただし、スコープ変数itemにはアクセスできません。説明は以下のコードを見てください。これを把握するために、いくつかのAngularjsスキルを持っている

var demo = angular.module('demo', []); 
 
demo.directive('customRepeat', function($compile) { 
 
    return { 
 
     priority: 2000, 
 
     restrict: 'A', 
 
     compile: function(element){ 
 
     element.attr('ng-repeat', 'item in [1,2,3,4,5,6]') 
 
      
 
     return function(scope, element) { 
 
      $compile(element)(scope) 
 
     } 
 
     } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 
<div ng-app='demo'> 
 
    <h3>My Items</h3> 
 
    <div custom-repeat> 
 
     Item: {{item}} 
 
    </div> 
 
</div>

？

N.B.古いバージョンのAngularjs（1.2.xなど）でこれを試してみてください。意図したとおりに動作することがわかります。

Answer 1

生DOMが変更されたときにコンパイルする正しい方法は、var compileFn = $compile(element)のようなディレクティブコンパイル関数からcompileFnを作成し、次にscopeという好きなリンク関数リコンパイル要素のように作成します。そうすれば、角度1.2.X & 1.6.Xバージョンの両方でMaximum call stack exceed errorが表示されます。コンソールを開いてthis plunkerを確認してください。

基本的に何が起こっすると、再びcustomDirectiveのコンパイルにつながる、とこのプロセスは無限に起こっ続けるであろう、もう一度その要素を再コンパイルディレクティブ要素&にng-repeatを追加している、です。したがって、要素をもう一度コンパイルする前に、custom-reportディレクティブ属性を削除したことを確認する必要があります。それはcustom-report無限の実行に許可されません。

var demo = angular.module('demo', []); 
demo.directive('customRepeat', function($compile) { 
    return { 
     priority: 2000, 
     restrict: 'A', 
     compile: function(element){ 
     element.attr('ng-repeat', 'item in [1,2,3,4,5,6]') 
     element.removeAttr('custom-repeat'); 
     //this line is need for compilation of element 
     var compile = $compile(element); 
     return function(scope, element) { 
      compile(scope); //linking scope 
     } 
     } 
    } 
}); 

Plunker Demo