需要将事件绑定到使用templateUrl中的ng-repeat准备的指令子节点。
我试图在link
函数中绑定事件,但孩子们尚未准备好。
以下是plunker.
在这里,我想绑定使用ng-repeat准备的click
标记上的li
事件。但到时,执行link
,li
元素尚未准备好。
有人可以帮忙吗。
答案 0 :(得分:5)
我用angular $ timeout
解决了同样的问题
link: function (scope, element) {
$timeout(function () {
element.on('click', '#Id', function () {
console.log('inside event handler of the first child)
})
})
}

通过在指令
中注入$ timeout来尝试此操作答案 1 :(得分:1)
解决方案#1
使用角度ng-click指令(plunker
)
<button ng-click="showValuePopup = !showValuePopup;">Click</button>
<div ng-show="showValuePopup">
<ul>
<li ng-click="$parent.showValuePopup = false;" ng-repeat="option in options" value="{{ option.value }}"
symbol="{{ option.symbol }}">{{ option.text }}
</li>
</ul>
</div>
解决方案#2
在ng-repeat最后一个元素加载(plunker
)
app.directive('onLastRepeat', function () {
return function (scope, element, attrs) {
if (scope.$last) setTimeout(function () {
debugger;
scope.$emit('onRepeatLast', element, attrs);
}, 1);
};
});
并在链接功能中监听此事件:
$scope.$on('onRepeatLast', function(scope, element, attrs){
// make what you want
valuePopup.find('li').on('click',function(){
valuePopup.hide();
});
valuePopup.find('keydown').on('click',function(){
valuePopup.hide();
});
});
答案 2 :(得分:0)
也许它会帮到你
app.directive('gtmsCycleButton', function () {
return{
restrict: 'EA',
link: function (scope, el, attrs) {
scope.$watch(attrs.options, function(newVal, oldVal) {
if (newVal === oldVal) return;
var btn = $(el).find('.v-btn'),
valuePopup = $(el).find('.v-value-popup');
btn.on('click', function() {
console.log('Button Clicked');
valuePopup.toggle().focus();
});
valuePopup.find('li').on('click', function() {
valuePopup.hide();
});
valuePopup.find('keydown').on('click', function() {
valuePopup.hide();
});
});
},
templateUrl: 'temp1'
}
});