Question

我正在尝试根据导航栏中选择的文件夹将图像动态加载到滑块。子文件夹位于名为cats，dogs等的图像文件夹中，可以在导航栏中选择子文件夹。我假设我需要在每个文件夹中为图像命名相同的名称（我已将其命名为（1.JPG，2.JPG等），以便它们可以动态加载。我还没有将图像加载到图像滑块中。请在控制器或html中查看我错过的内容。谢谢。

我发现了问题。它不会读取{{uri}} / {{currentFolder}} / {{image}}”。控制台元素显示一个空标签。因此，屏幕上显示的全部是alt文本，它还读取了Carousel指示器中的所有内容。找不到为什么不读这条路。任何帮助都很棒。谢谢。

templateurl.html

<div class="slider">
      <div id ="myCarousel"class="carousel-slide" data-ride="carousel">
        <ol class ="carousel-indicators">
         <li data-target = "#myCarousel" ng-repeat="image in images" 
     ng-class="{active:isCurrentSlideIndex($index)}"
     data-slide-to="   {{image}}">     </li>
          </ol>
          <div class="carousel-inner">
            <div ng-class="{item: true, active: isCurrentSlideIndex($index)}"ng-repeat="image in images">
              <img class ="img" ng-src="{{uri}}/{{currentFolder}}/{{image}}"alt="Slide number {{image}}">>
      </div>

Index.html

<slider images="images"/>
    </div>
    </div>
      <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-botom" role="navigation">
      <div class="container">
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li ng-repeat="folder in folders" ng-class="{active:activeFolder(folder)}" ng-click="selectFolder(folder)">
             <a ng-href="#{{folder}}">{{folder}}</a>
            </li>
          </ul>
        </div><!--/.nav-collapse -->

app.js

var sliderApp=angular.module('sliderApp',['ngAnimate']);

    sliderApp.controller('SliderController', function($scope) {
      $scope.w=window.innerWidth;
      $scope.h = window.innerHeight;
      $scope.uri="images";
      $scope.folders =['cats','dogs'];
      $scope.images =["1.JPG","2.JPG","3.JPG"];
      $scope.currentFolder = $scope.folders[0];
      $scope.selectFolder = function(folder) {
        $scope.currentFolder=folder;
      };
      $scope.activeFolder = function(folder) {
        return (folder ===$scope.currentFolder);
      }
    });


    sliderApp.directive('slider', function ($timeout) {
      return {
        restrict: 'AE',
      replace: true,
      scope:{
        images: '='
      },
        link: function (scope, elem, 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;
        };

        scope.isCurrentSlideIndex = function (index) {
                return scope.currentIndex === index;
            };


        scope.$watch('currentIndex',function(){
          scope.images.forEach(function(image){
            image.visible=false;
          });
          scope.images[scope.currentIndex].visible=true;
        });

        /* Start: For Automatic slideshow*/

        var timer;

        var sliderFunc=function(){
          timer=$timeout(function(){
            scope.next();
            timer=$timeout(sliderFunc,4000);
          },4000);
        };

        sliderFunc();

        scope.$on('$destroy',function(){
          $timeout.cancel(timer);
        });

        /* End : For Automatic slideshow*/

        },
      templateUrl:'templates/templateurl.html'
      }
    });

Answer 1

我看到的是，您没有加载图像。在selectFolder（）方法内部，您应该执行$ http.get（）以获取图像列表，为每个图像创建url并将其传递给看看那个Load directory of images in AngularJS 或通过google获取更多“来自服务器的图像的角度加载列表”结果

AngularJS动态图像加载多个文件夹

1 个答案: