私はより大きなプロジェクトでこの問題を抱えており、最も単純な例を作成しました。
いくつかのデータを含むコントローラーがあります。このデータはディレクティブに供給され、ネイティブの ng-repeat を使用して表示する必要があります。ただし、ディレクティブ コントローラーが実行されるとき、角度変数はまだ解析されていないため、繰り返しはレンダリングされません。
事前解析が必要な外部変数で繰り返しが機能するようにするにはどうすればよいですか?
ここにフィドルがあります。関数の実行時には未定義であることが示されているため、コンソールが開いていることを確認してください。ただし、1 秒後に定義されます。
ここに私のJS:
var module = angular.module('testApp', [])
.directive('test', function () {
return {
restrict: 'E',
template: '<p ng-repeat="x in sl">{{x.val}}</p>', // this wont work :(
scope: {
sl: '@sl'
},
link: function ($scope, $element, $attrs) {
console.log($attrs.sl); // this will return undefined
setTimeout(function(){
console.log($attrs.sl); // this will return the correct list
},1000);
}
};
});
function sweetCtrl($scope){
$scope.someList =
[
{"val":"a"},
{"val":"b"},
{"val":"c"},
{"val":"d"},
{"val":"e"},
{"val":"f"}
];
}
これが私のドームです
<div ng-app="testApp" ng-controller="sweetCtrl">
<p>raw list: {{someList}}</p>
<p>repeat list:</p>
<test sl="{{someList}}"></test>
</div>
編集: 入力データが sl を読み取る必要がある以前のコードにエラーがありました。
ソリューションのフィドルはこちら: http://jsfiddle.net/paulocoelho/xqLAs/3/