AngularJS Динамическая загрузка изображений в несколько папок - PullRequest
Новая
       23

AngularJS Динамическая загрузка изображений в несколько папок

0 голосов
/ 29 октября 2018

Я пытаюсь динамически загружать изображения в слайдер в зависимости от того, какая папка выбрана в навигационной панели.Подпапки находятся в папке изображений, называемой кошками, собаками и т. Д., Которые можно выбрать на панели навигации.Я предположил, что мне нужно было присвоить изображениям одинаковые имена в каждой папке, что я и сделал (1.JPG, 2.JPG и т. Д.), Чтобы они могли динамически загружаться.Я еще не получил изображения для загрузки в слайдер изображений.Пожалуйста, посмотрите, что я пропустил в контроллере или путь в HTML.Спасибо.

Я нашел проблему.Он не читает {{uri}} / {{currentFolder}} / {{image}} ". Элементы консоли отображают пустой тег. Поэтому все, что отображается на экране, - это альтернативный текст. Он также читает все в индикаторах карусели.Не могу найти, почему он не читает этот путь. Любая помощь будет потрясающей. Thx.

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

1 Ответ

0 голосов
/ 29 октября 2018

Что я вижу, вы не загружаете изображения. Внутри метода selectFolder () вы должны сделать $ http.get (), чтобы получить список изображений, создать URL для каждого изображения и передать его Посмотрите на это Загрузить каталог изображений в AngularJS Или Google для получения более «угловой загрузки списка изображений с сервера» результаты

...