テンプレートを持つディレクティブを作成しようとしています。テンプレートは、取得したいいくつかの DOM 要素をレンダリングしています。ただし、リンク関数で DOM 要素を取得しようとすると、DOM 要素が見つかりません。見つかった要素を選択する前に window.setTimeout メソッドを追加すると、リンク関数で DOM を操作する前に、テンプレートのレンダリングが完了するのを待つにはどうすればよいですか?
私がやろうとしていることのディレクティブコードは次のとおりです。
module.directive('testLocationPicker', function() {
var linkFn = function(scope, element, attrs) {
console.log('in linking function');
window.setTimeout(function() {
var positions = $('.position');
console.log('number positions found: ' + positions.length);
positions.click(function(e) {
console.log('position clicked');
scope.$apply(function() {
scope.selectedPosition = $(e.currentTarget).html();
});
});
}, 500);
};
return {
link: linkFn,
restrict: 'E',
template: 'Choose a position: <div class="position" ng-repeat="position in positions">{{position}}</div>',
}
});
私がやろうとしていることの JS Fiddle があります: http://jsfiddle.net/bdicasa/XSFpu/42/