AngularJS 滑块 - 路由问题（我无法正确路由我的按钮/页面）答案

【问题标题】：AngularJS slider - routing issue (I can't route my buttons/pages correctly)AngularJS 滑块 - 路由问题（我无法正确路由我的按钮/页面）
【发布时间】：2016-03-08 03:56:32
【问题描述】：

我是 AngularJS 的新手，我正在尝试制作从在线示例中复制的滑块。目前，我在我想要的页面（gallery.html）上出现了滑块，并且自动图片更改有效，但是，当我尝试按下下一个/上一个按钮时，它只是将我带到一个随机页面什么都没有。

我认为问题出在箭头上的 href 上，但老实说，我不知道从哪里开始。另外，我的滑块指令是否在正确的位置（gallery.html 的顶部）？

文件结构：

摄影
- bower_components
-CSS
----- stylemain.css
-img
----- 电话
---------- ...一堆png文件...
- js
----- app.js
----- 控制器.js
- 部分
----- 图库.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 文件，其中包含不同手机上的字段等。

提前致谢，非常感谢所有帮助！！！！

【问题讨论】：

使用 $stateProvider 代替 $routeProvider 并使用 .state() 定义状态，然后在控制器中执行 $state.go('/')
最好不要为模块和每个控制器创建新的变量。每次都使用 angular.module('name').controller()。

标签： javascript html css angularjs angular-ui-router

【解决方案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" 已经知道要走哪条路线。

【讨论】：