將單擊事件綁定到指令元素的子元素

[英]AngularJS - Bind click event to children of directive element


I'm back to using AngularJS and I've forgotten everything. I have an div in my html view that contains a custom directive and the children DIVs have a ng-repeat directive, this is my HTML:

我又開始用AngularJS了,我都忘了。我在html視圖中有一個div包含一個自定義指令子div有一個ng-repeat指令,這是我的html:

<div class="row" data-custom-directive>
<div class="col-xs-2 main-nav-cell" data-ng-repeat="nav in mainNavigation.topNavi" data-url="{{ nav.link }}">
    <div> {{ nav.name }} </div>
    <div class="item-counter" data-ng-show="nav.value > 0"> {{ nav.value }} </div>
</div>
</div>

Now in my custom directive I wait for the ng-repeat to complete then I loop through the children DIVs and perform certain tasks (some I have omitted here).

現在,在我的定制指令中,我等待ng-repeat完成,然后我循環遍歷這些子div並執行某些任務(有些我在這里省略了)。

.directive('customDirective', function ($location, $timeout, $rootScope) {
    'use strict';
    return{
        restrict: 'A',
        link: function (scope, element) {

            $timeout(function () {

                var i,
                    list = angular.element(element),
                    cssCheck = function () {


                        for (i = 0; i < list[0].children.length; i++) {

                            /* 

                            Here I wish to set a click event on the Child DIV 
                            I have tried list.children()[i].click = fn & list.children()[i].bind('click' fn)
                            but nothing works!
                            */

                            // if the class is there remove it...
                            if (list.children()[i].classList.contains('is-active')) {
                                list.children()[i].classList.remove('is-active');
                            }


                            // if there is a match add the class...
                            if ($location.url().indexOf(list[0].children[i].getAttribute('data-url')) > 0) {
                                console.log('match');
                                list.children()[i].classList.add('is-active');
                            }

                        }

                    };

                $rootScope.$on('$routeChangeSuccess', function () {
                    cssCheck();
                });

                // original kickoff
                cssCheck();
            });
        }
    };

I want to assign a click event to the first child div (where I check the CSS) and perform certain tasks depending on the 'data-url' I don't really want to add a ng-click directive to the child in my HTML. Can someone please advise me on how to add a click event to the child div?

我想將一個click事件分配給第一個子div(在這里我檢查CSS)並根據“數據url”執行某些任務,我並不想在HTML中添加一個ng-click指令。有人能告訴我如何向子div添加單擊事件嗎?

Many thanks

非常感謝

1 个解决方案

#1


3  

If Using jQuery:

如果使用jQuery:

link: function (scope, element) {
    $timeout(function () {
        element.on('click', ':first', function () {
            console.log('inside event handler of the first child)
        })
    })
}

If not using jQuery

如果不使用jQuery

link: function (scope, element) {
    $timeout(function () {
        angular.element(element).on('click', function (evt) {
            var isFirstChild = (evt.target.parentElement.children[0] === evt.target);

            if (isFirstChild) {
                // do the stuff
            }
        });
    })
}

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2015/02/27/7298d89838dfdc1a11f1e970d0e706ac.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com