Question

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

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

文件结构：

摄影
- bower_components
- css
----- stylemain.css
- img
-----手机
---------- ......一堆png文件......
- js
----- app.js
----- controller.js
- 部分
----- gallery.html
- 手机
----- ...一堆json文件......
- index.html

这是我的index.html：

CultureInfo.InvariantCulture

这是我的app.js：

bool result=float.TryParse(
    "6,78"
,   NumberStyles.Float
,   new CultureInfo("de-DE").NumberFormat
,   out number);

这是我的controller.js：

<!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>

这是我的gallery.html：

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

phones.json只是一个json文件，其中包含不同手机上的字段等。

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

Answer 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”已知道要走哪条路。

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

1 个答案: