在链接函数中将事件绑定到指令的子元素

时间:2014-12-26 11:48:16

标签: angularjs angularjs-directive angularjs-ng-repeat

需要将事件绑定到使用templateUrl中的ng-repeat准备的指令子节点。 我试图在link函数中绑定事件,但孩子们尚未准备好。

以下是plunker.

在这里,我想绑定使用ng-repeat准备的click标记上的li事件。但到时,执行linkli元素尚未准备好。 enter image description here

有人可以帮忙吗。

3 个答案:

答案 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'
    }
});