無法訪問DOM元素角指令模板

出於某種原因，我無法將指令模板內訪問DOM元素。我確定這裏有一些非常明顯的事情。無法訪問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>

來源

2015-10-12 utkarsh sharma

你得到了什麼錯誤？ – Rabi

我發現了幾個問題與上面的代碼 -

缺少「}」之前」，模板：.. 「
您在不同的文件分離的模板，所以你應該用「templateurl」，而不是「模板」
模板含量應該只有一個根元素，當您使用替換=指令中的真實。 click here瞭解更多信息。

請參考下面的代碼片段 -

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

<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>

希望這有助於！

來源

2015-10-12 10:24:13

無法訪問DOM元素角指令模板

回答

相關問題