Слайдер AngularJS - проблема с маршрутизацией (я не могу правильно перенаправить свои кнопки / страницы)

0

Я новичок в AngularJS, и я пытаюсь сделать работу слайдера, которую я скопировал из примера в Интернете. На данный момент у меня есть ползунок, который появляется на странице, на которой я хочу его (gallery.html), и автоматическое изменение изображения работает, но когда я пытаюсь нажать следующую/предыдущую кнопку, это просто приводит меня к случайной странице с ним ничего нет.

Я думаю, что проблема связана с моими стрелами на стрелах, но я честно не знаю, куда идти отсюда. Кроме того, моя директива слайдера в нужном месте (вверху gallery.html)?

Структура файла:

фотография
- bower_components
- css
----- stylemain.css
- img
----- телефоны
----------... куча png файлов...
- js
----- app.js
----- controller.js
- частичные
----- gallery.html
- телефоны
-----... куча json файлов...
- index.html

Это мой index.html:

<!DOCTYPE html>
<html lang="en" ng-app="mainApp">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <!--<link rel="stylesheet" href="css/app.css">-->
    <link rel="stylesheet" href="css/stylemain.css">

    <!-- JS & ANGULAR FILES -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-touch.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.4.8/angular-touch.js"></script>
    <script src="https://code.angularjs.org/1.4.8/angular-animate.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controller.js"></script>
    <!--<script src="js/directives.js"></script>-->
</head>

<body>
    <div class="template-header">
        <div class="template-container">
            <div class="template-logo">
                <h1><a href="#/">title</h1>
            </div>
            <div class="template-nav">
                <ul>
                    <li><a href="#/">Home</a></li>
                    <li><a href="#/gallery">Gallery</a></li>
                    <li><a href="#/music">Music</a></li>
                    <li><a href="#/other-work">Other-work</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- BODY CONTENT -->
<div class="dynamic-body" ng-view></div>

</body>

Это мой app.js:

    'use strict';

/* App Module */

var mainApp = angular.module('mainApp', [
    'ngRoute',
    'galleryControllers'
]);

mainApp.config(['$routeProvider',
    function($routeProvider){
        $routeProvider
            .when('/', {
                templateUrl:'partials/main.html',
            })
            .when('/gallery', {
                templateUrl:'partials/gallery.html',
                controller: 'mainImageCtrl',
            })
            .when('/:phoneId', {
                templateUrl: 'partials/gallery-image.html',
                controller: 'singleImageCtrl'
            })
            .when('/music', {
                templateUrl: 'partials/music.html',
                controller: 'singleImageCtrl'
            })
            .when('/other-work', {
                templateUrl: 'partials/other-work.html',
                controller: 'singleImageCtrl'
            });
    }
]);

Это мой controller.js:

'use strict';

/* Controllers */

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

galleryControllers.controller('mainImageCtrl',['$scope', '$http',
    function($scope, $http){
        $http.get('phones/phones.json').success(function(data){
            $scope.images = data;
        });
}]);

galleryControllers.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.$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,2000);
            },2000);
        };

        sliderFunc();

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

        /* End : For Automatic slideshow*/

    }

  };
});



// galleryControllers.controller('singleImageCtrl',['$routeParams','$scope', 
//  function($scope, $routeParams){
//      $scope.phoneId = $routeParams.phoneId;
// }]);

Это моя галерея.html:

<slider images="images"/>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2">
      <!--Sidebar content-->

      Search: <input ng-model="query"/>
      Sort by:
      <select ng-model="orderProp">
        <option value="name">Alphabetical</option>
        <option value="age">Newest</option>
      </select>

    </div>

      <!--Body content-->

<!--       <ul class="phones">
        <li ng-repeat="phone in phoneImages | filter:query | orderBy:orderProp" class="thumbnail">
          <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
          <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
          <p>{{phone.snippet}}</p>
        </li>
      </ul> -->
 <div class="slider">
  <div class="slide" ng-repeat="image in images" ng-show="image.visible">
    <img ng-src="{{image.imageUrl}}" />
  </div>
  <div class="arrows">
    <a href="#" ng-click="prev()">
      <img src="img/left-arrow.png" />
    </a>
    <a href="#" ng-click="next()">
      <img src="img/right-arrow.png" />
    </a>
  </div>
</div>

  </div>
</div>

phones.json - это просто файл json с полями на разных телефонах и т.д.

Спасибо заранее, вся помощь очень ценится !!!!

  • 0
    используйте $ stateProvider вместо $ routeProvider и определяйте состояния с помощью .state (), затем делайте $ state.go ('/') в контроллере
  • 0
    Лучше не создавать новую переменную с модулем и каждым контроллером. Вместо этого используйте angular.module ('name'). Controller () каждый раз.
Теги:
angular-ui-router

1 ответ

1

с https://github.com/angular-ui/ui-router

и каждый раз, когда вы пытаетесь вызвать маршрут, используемый =

 <a  ui-sref="root">link</a>

appModule.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('/signin');
$stateProvider
    .state("root", {
        url: "/signin",
        templateUrl: "views/signin.html",
        controller: 'AuthController'
    })

с ui-sref = "root" уже знают, к какому пути идти.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню