Question

大家好我对ng1有一些疑问，这个链接功能无法捕获li，

var a=document.querySelectorAll(".carousel ul");
console.log(a);

输出"[ul]"但

var b=document.querySelectorAll(".carousel ul li");
console.log(b)

输出“[]”为什么链接无法捕获.carousel ul li？

 <html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/angular.js"></script>
</head>
<body ng-controller="myController">
<carousel my-image="image"></carousel>
</body>
<style>
    .carousel{
        width:300px;
        height:200px;
        display:block;
        overflow:hidden;;
    }
    .carousel ul{
        position:relative;
        left:0;
        list-style:none;
        padding:0;
        margin:0;
        width:900px;
        height:100%;
    }
    .carousel ul li {
        float:left;
        width:300px;
        height:200px;

    }
</style>
<script>
    angular.module("myApp",[])
            .controller("myController",function($scope){
                $scope.image=[
                    {'title':"1",'img':"../image/a.jpg"},
                    {'title':"2",'img':"../image/g.jpg"},
                    {'title':"3",'img':"../image/z.jpg"}
                ];
            })
            .directive("carousel",function(){
                return {
                    replace: true,
                    restrict: "EA",
                    scope: {
                        img: "=myImage"
                    },
                    transclude: true,
                    template: '<div class="carousel"> <ul> <li ng-repeat="i in img"> <img width="100%" height="100%" src="{{i.img}}"  alt=""/> </li> </ul> </div>',
                    link: function (scope, elem, attr) {
                        var a=document.querySelectorAll(".carousel ul");
                        console.log(a);
                        var b=document.querySelectorAll(".carousel ul li");
                        console.log(b);
                    }
                }
            });
</script>
</html>

Answer 1

您无法捕获li元素，因为在调用链接函数时，angular尚未完成DOM的操作。 “ng-repeat”中的内容未被正确操作。

尝试将其放入scope.$evalAsync

link: function (scope, elem, attr) {
                        //...
                        scope.$evalAsync(function(){
                           var b=document.querySelectorAll(".carousel ul li");
                           console.log(b);
                        })

                }

更新：

抱歉$ evalAsync在这种情况下不起作用。应该使用$ timeout。

.directive("carousel",function($timeout){
                return {
                    replace: true,
                    restrict: "EA",
                    scope: {
                        img: "=myImage"
                    },
                    transclude: true,
                    template: '<div class="carousel"> <ul> <li ng-repeat="i in img"> <img width="100%" height="100%" src="{{i.img}}"  alt=""/> </li> </ul> </div>',
                    link: function (scope, elem, attr) {
                        var a=document.querySelectorAll(".carousel ul");
                        console.log(a);
                        $timeout(function(){
                          var b=document.querySelectorAll(".carousel ul li");
                          console.log(b);
                        },0)

                    }
                }
            });

如何使用angular1.x链接功能

1 个答案: