Question

似乎我在angularjs指令中的li元素没有响应点击事件。

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);
        }
    };
});

我有3个li元素并且点击其中任何一个都没有点击链接功能中的代码。有人有想法吗？

Answer 1

你看起来很像棱角分明的角色。

首先，在继续之前 - 你的指令甚至根本不会在它所处的状态下绑定。你有一个元素指令（这很好，但如果我是你，我会把它作为一个属性指令通过限制A，然后允许您将其应用于代码中名为myselbg的列表而不是其上方的元素。但是，您的标记设置为my-selbg，然后会查找不存在的角度指令mySelbg。

除此之外，您的指令将在之前评估列表的（由于执行中的优先级顺序）。你有两种选择：

您可以执行以下操作：https://jsfiddle.net/a01n3srw/1/。真的不推荐 - 我正在使用$timeout来评估当前刷新周期完成后的代码，此时列表完全存在

您可以使用简单的ngClick角度核心指令来简化这一过程。额外奖励，当你评估的功能开始修改范围时，你不会使用前面的方法射击自己并且必须使用$apply

点击元素未点击angularjs指令链接功能

1 个答案: