单击元素未命中angularjs指令链接功能

Question

It seems my li elements in angularjs directive not responding clicking event.

HTML:

<my-selbg>
                            <ul>
                                <li ng-repeat="bgimage in bgimages"><img src={{bgimage}} width="85" height="82" dir={{bgimage}}></li>
                            </ul>
                        </my-selbg>

JS:

var mlwcApp = angular.module('mlwcApp', [])
.controller('BgImagesListController', function($scope, $http) {

    $http.get("http://localhost:8080/webcontent/bg_images").success(function(response) {
        $scope.bgimages = response;
    });
})
.directive('myselbg', function(){
    return {
        restrict: 'E',
        scope: true,
        link: function(scope, element, attrs){
            var elementOne = angular.element(element.children[1]);
            var elementTwo = angular.element(element.children[2]);
            var elementThree = angular.element(element.children[3]);

            setUpBGImg = function(){
                console.log('link function');
            };
            $(elementOne).on('click', setUpBGImg);
            $(elementTwo).on('click', setUpBGImg);
            $(elementThree).on('click', setUpBGImg);
        }
    };
});

I have 3 li elements and clicking any of them dose not hit the code in link function. Anyone has idea?

Answer 1

You're new to angular, by the looks of it.

First off, before going any further - your directive will not even bind at all in the state it is in. You've got an element directive (which is fine, though if I were you I'd make it an attribute directive by restricting on A , which allows you to then apply it to the list rather than an element above it) named myselbg in your code. However, your markup is set as my-selbg , which would then look for the angular directive mySelbg , which does not exist.

In addition to this, your directive will evaluate before the list is rendered (thanks to the order of priority in execution). You have two choices to go around this:

• You can do something like this: https://jsfiddle.net/a01n3srw/1/ . Really not recommended - I am using $timeout in order to evaluate code after the current refresh cycle is done, at which point the list fully exists
• You can use the simple ngClick angular core directive in order to make this easy. Added bonus, when your function that you evaluate starts modifying scope, you won't shoot yourself in the foot using the previous method and having to use $apply