Angular Js bootstrap carousel

Question

Пытается использовать бутстрап, угловую и карусельную, чтобы отображать изображения в своих папках, которые находятся на моем локальном диске, но зациклился на том, как идти о пошиве моего углового файла. Вот пример, но этот пример отображает изображения из Интернета. Как мне это сделать? вот сайт с исходным кодом http://www.cssscript.com/demo/responsive-image-carousel-with-angular-js-and-bootstrap-3/#abstract

вот угловой файл.

app.controller('portfoliocontroller', ['$scope', '$http', 
    function($scope, $http) { 
    $scope.title = 'Our portfolio'; 
    $scope.w = window.innerWidth; 
    $scope.h = window.innerHeight - 20; 
    $scope.uri = "http://lorempixel.com"; 
    $scope.folders = [ 
     'abstract', 
     'animals', 
     'business', 
     'cats', 
     'city', 
     'food', 
     'night', 
     'life', 
     'fashion', 
     'people', 
     'nature', 
     'sports', 
     'technics', 
     'transport' 
    ]; 
    $scope.images = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; 

    $scope.currentFolder = $scope.folders[0]; 
    $scope.selectFolder = function(folder) { 
     $scope.currentFolder = folder; 
    }; 
    $scope.activeFolder = function(folder) { 
     return (folder === $scope.currentFolder) ? 'active' : ''; 
    }; 

    } 
]); 

здесь HTML-файл

<div class="container"> 
    <!-- Carousel 
     ================================================== --> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" ng-repeat="img in images" class="{active : (img === 0)}" data-slide-to="{{img}}"></li> 
    </ol> 
    <div class="carousel-inner"> 
     <div ng-class="{item: true, active : (img === 0)}" ng-repeat="img in images"> 
     <img ng-src="{{uri}}/{{w}}/{{h}}/{{currentFolder}}/{{img}}" alt="Slide numder {{img}}"> 
     <div class="container"> 
      <div class="carousel-caption"></div> 
     </div> 
     </div> 
    </div> 
    <a class="left carousel-control" data-target="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> 
    <a class="right carousel-control" data-target="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span> 
    </a> 
    </div> 
    <!-- /.carousel --> 

    <!-- 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" class="{{activeFolder(folder)}}" ng-click="selectFolder(folder)"> <a ng-data-target="#{{folder}}">{{folder}}</a> 
      </li> 
     </ul> 
     </div> 
     <!--/.nav-collapse --> 
    </div> 
    </div> 

Answer 1

Если все, что вы пытаетесь сделать, это адаптировать эту библиотеку, чтобы использовать ваши локальные папки вы просто заменить Ури с основанием папку с изображениями или тому подобное. Что-то вроде этого.

$scope.uri = "path/to/my/images"; 

И ваша разметка будет ссылаться на папки так же:

<img ng-src="{{uri}}/{{currentFolder}}/{{img}}" alt="Slide numder {{img}}"> 

Ширина и высота изображений должны быть отформатированы в самой или в CSS изображения.

Answer 2

Вы можете использовать этот. Это полностью основано на AngularJS и Bootstrap.

https://angular-ui.github.io/bootstrap/#/carousel