我正在尝试编写一个带有模板的指令。该模板渲染了一些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/