Question

由于某种原因，我无法访问指令模板中的dom元素。我相信这里有一些非常明显的东西。

var slider = angular.module('imageSlider', []);
slider.directive('slider', function($timeout) {
return {
    restrict : 'AE',
    replace : true,
    scope : {
        images : '='
    },
    link : function(scope, ele, attrs) {
        scope.currentIndex = 0;

        scope.next = function() {
            scope.currentIndex < scope.images.length - 1 ? scope.currentIndex++ : scope.currentIndex = 0;
        };
        scope.prev = function() {
            scope.currentIndex > 0 ? scope.currentIndex-- : scope.currentIndex = scope.images.length - 1;
        };
        console.log(document.getElementById('sliderimage'));
        console.log(document.getElementById("id"));
        console.log(ele.find("li"));
       ,
       template : 'directive/imageSlider/imageSliderTemplate.html'
    }    
});

模板代码：

<secton class="gallery">
<div class="gallery-content row fl no-fixed">
    <img ng-src="{{images[currentIndex].src}}" alt="{{images[currentIndex].src}}" class="img-responsive">
    <button ng-click="prev()" class="ico ico-arr-left btn"></button>
    <button ng-click="next()" class="ico ico-arr-right btn"></button>
    <div class="gallery-info row">
        <h3 class="fl">{{images[currentIndex].title}}</h3>
        <span class="gallery-number fr fs-md">{{currentIndex + 1}}/{{images.length}}</span>
    </div>
</div>
<div class="gallery-thumbs hidden-md row">
    <button class="btn ico ico-arr-left" title="Click to see previous image"></button>
    <button class="btn ico ico-arr-right" title="Click to see next image"></button>
    <div class="gallery-thumbs-scroll">
        <ul>
            <li id="sliderimage" ng-repeat="image in images"><img ng-src="{{image.src}}" alt="{{image.alt == 'undefined' ? image.title : image.alt}}"></li>
        </ul>
    </div>
</div>

Answer 1

我在上面的代码中发现了几个问题 -

＆＃34;}＆＃34; ＆＃34;，模板：..＆＃34;
您在不同的文件中分隔了模板，因此您应该使用＆＃34; templateurl ＆＃34;而不是＆＃34;模板＆＃34;
在指令中使用replace = true时，模板内容应该只有单个根元素。 click here了解更多信息。

请参阅以下代码段 -

＆＃13;

var slider = angular.module('imageSlider', []);

    slider.controller('myController',function($scope){
        $scope.i = [{title:'Test'},{title:'Demo'},{title:'Okay!'}];
    });

    slider.directive('slider', function($timeout) {
            return {
                    restrict : 'AE',
                    scope : {
                        images : '='
                    },
                    replace: true,
                    template : '<div ng-click="next()" id="sliderimage">{{images[currentIndex].title}} {{currentIndex + 1}}/{{images.length}}</div>',
                    link : function(scope, ele, attrs) {
                        scope.currentIndex = 0;

                        scope.next = function() {
                            scope.currentIndex < scope.images.length - 1 ? scope.currentIndex++ : scope.currentIndex = 0;
                        };
                        scope.prev = function() {
                            scope.currentIndex > 0 ? scope.currentIndex-- : scope.currentIndex = scope.images.length - 1;
                        };
                        console.log(document.getElementById('sliderimage'));
                       }
                };     
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="imageSlider">

<div ng-controller="myController">
    <slider images="i"></slider>
</div>


</body>

＆＃13;

希望这有帮助！

无法访问角度指令模板中的dom元素

1 个答案: