$ element.append（）は、トランスコードされたときには追加されません

私が理解する限り、以下のコードでは毎回異なるインデックス値で3回パラグラフをレンダリングする必要があります。代わりに、最後のトランジションだけをレンダリングしています。何が起きてる？

const app = angular.module('app', []) 
 
app.component('test', { 
 
    transclude: true, 
 
    controller: function($scope, $element, $transclude) { 
 
    //The transclusion should appear 3 times right? Since we're appending 3 times? 
 
    for(let index of [10, 11, 12]) { 
 
     const x = $transclude(Object.assign($scope.$new(true), {index})) 
 
     $element.append(x) 
 
    } 
 
    }, 
 
}); 
 
angular.bootstrap (document.querySelector('body'), ['app'])

<body> 
 
    <test> 
 
    <p>This is {{index}}</p> 
 
    </test> 
 
    <script src="https://code.angularjs.org/1.5.8/angular.js"></script> 
 
</body>

出典

2017-08-25 George Mauer

$ transcludeFnは適用され、新たなスコープを持つ要素のクローンを受けて第二のパラメーターを受け入れます。この関数でクローンを使用してdomに入れたいとします。あなたはここでそれについての詳細を読むことができます：http://ng.malsup.com/#!/transclude-functionかここに：https://docs.angularjs.org/api/ng/service/$compile#-controller-

const app = angular.module('app', []) 
 
app.component('test', { 
 
    transclude: true, 
 
    controller: function($scope, $element, $transclude) { 
 
    //The transclusion should appear 3 times right? Since we're appending 3 times? 
 
    for(let index of [10, 11, 12]) { 
 
     $transclude(
 
     Object.assign($scope.$new(true), {index}), 
 
     x => $element.append(x) 
 
    ) 
 
    } 
 
    }, 
 
}); 
 
angular.bootstrap (document.querySelector('body'), ['app'])

<body> 
 
    <test> 
 
    <p>This is {{index}}</p> 
 
    </test> 
 
    <script src="https://code.angularjs.org/1.5.8/angular.js"></script> 
 
</body>

出典

2017-08-25 20:35:24

$ element.append（）は、トランスコードされたときには追加されません

答えて

関連する問題