angular JS添加图片库/查看器打破单页面路由

我对Angular更新，所以这可能是一个非常简单/愚蠢的问题，但在googleing和尝试很多事情后，我无法让它工作。我相信这可能不是直接与图像查看器相关的，但是当试图添加额外的功能注入代码（如：angular.module（'app'，['angular-flexslider']） ;）我尝试了一些其他的东西，并有同样的问题，所以这可能是一个普遍的问题，当我添加这个包含路由的所有事情时，我有我的代码设置（但路由是我目前唯一真正的功能。）angular JS添加图片库/查看器打破单页面路由

如果我有独立的页图像浏览器，它工作正常，但与其他代码合并它引起的问题。

var app = angular.module('app', ['angular-flexslider']);

如果我将“应用程序”更改为“app1”，它不会导致所有路由中断，因此它不是导致问题本身的脚本标记，而是与此有关的事情以及我如何设置代码越来越交叉我认为）。

的代码为我的网页是重要的有：指数：

<!DOCTYPE html> 

<html ng-app="app"> 
<head> 

    <base href="/" /> 
</head> 
<body> 

    <link rel="stylesheet" href="styles/styles.css"> 

    <div class="header"> 
     <div class="container"> 
      <img src="/images/DPLogo.jpg" /> 
      <h1>Downriver Panters</h1> 
     </div> 
    </div> 
    <div class="nav-bar"> 
     <div class="container"> 
      <ul class="nav"> 
       <li><a href="home">Home</a></li>     
       <li><a href="history">History</a></li> 
       <li><a href="coaches">Coaches</a></li> 
       <li><a href="activities">Activities</a></li> 
       <li><a href="calender">Calender</a></li> 
       <li><a href="gallery">Gallery</a></li> 
       <li><a href="fundraisers">Fundraisers</a></li> 
       <li><a href="links">Links</a></li> 
       <li><a href="contactus">Contact Us</a></li> 
       <li><a href="styletesting">Test Styles</a></li> 
      </ul> 
     </div> 
    </div> 



    <div class="content"> 
     <div class="container"> 
      <div ng-view>ViewPage</div> 
     </div> 
    </div> 




    <div class="footer"> 
     <div class="container"> 
      &copy; Copyright 2016 
     </div> 
    </div> 


    <!-- this is code for the image viewer that is causing it to break (but also add the app.js file below)--> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script src="//code.angularjs.org/1.3.0/angular.js"></script> 
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script> 
    <script src="//cdn.jsdelivr.net/flexslider/2.2.2/jquery.flexslider-min.js"></script> 

    <script src="/testing/angular-flexslider.js"></script> 
    <script src="/scripts/angular.min.js"></script> 
    <script src="/scripts/angular-route.min.js"></script> 

    <!-- end of code causing it to break --> 


    <!-- my main control with the routing --> 
    <script src="/controllers/mainCtrl.js"></script> 

    <!-- have to put here?? so below mainCtrl??? cause not working if put on home page --> 
    <script src="/controllers/homeCtrl.js"></script> 
    <script src="/controllers/calenderCtrl.js"></script> 
    <script src="/controllers/coachesCtrl.js"></script> 
    <script src="/controllers/galleryCtrl.js"></script> 

    <!-- other file for routing that is causing it to break--> 
    <script src="/testing/app.js"></script> 

</body> 
</html>

mainCtrl.js（我的路由代码）

(function() { 
    'use strict'; 

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


    // configure our routes 
    app.config(['$routeProvider','$locationProvider', 
     function ($routeProvider, $locationProvider) { 

     $routeProvider 


      // catch all go home 
      .when('/', { 
       templateUrl: '/partials/home.html', 
       controller: 'homeController' 
      }) 

      // route for the home page 
      .when('/home', { 
       templateUrl: '/partials/home.html', 
       controller: 'homeController' 
      }) 

      // route for the about page 
      .when('/about', { 
       templateUrl: '/partials/about.html', 
       controller: 'aboutController' 
      }) 

      // route for the contact page 
      .when('/history', { 
       templateUrl: '/partials/hisotry.html', 
       controller: 'hisotryController' 
      }) 

      // route for the contact page 
      .when('/coaches', { 
       templateUrl: '/partials/coaches.html', 
       controller: 'coachesController' 
      }) 

      // route for the contact page 
      .when('/activities', { 
       templateUrl: '/partials/activities.html', 
       controller: 'activitiesController' 
      }) 

      // route for the contact page 
      .when('/calender', { 
       templateUrl: '/partials/calender.html', 
       controller: 'calenderController' 
      }) 

      // route for the contact page 
      .when('/gallery', { 
       templateUrl: '/partials/gallery.html', 
       controller: 'galleryController' 
      }) 


      // catch all go home 
      .when('/fundraisers', { 
       templateUrl: '/partials/fundraisers.html', 
       controller: 'fundraisersController' 
      }) 

      // catch all go home 
      .when('/links', { 
       templateUrl: '/partials/links.html', 
       controller: 'linksController' 
      }) 


      // route for the contact page 
      .when('/contactus', { 
       templateUrl: '/partials/contactus.html', 
       controller: 'contactusController' 
      }) 

      // catch all go home 
      .when('/styletesting', { 
       templateUrl: '/partials/styleTesting.html', 
       controller: 'styletestController' 
      }) 


      // happens when nothing specificed 
      .otherwise({ 
       redirectTo: '/' 
      }) 



      // not working/finding sites 
      // if you don't wish to set base URL then use this 
      $locationProvider.html5Mode({ 
       enabled: true, 
       requireBase: true 
      });   

     }]); 

})();

代码FOT的app.js（控制用于图像查看器的页面：

var app = angular.module('app', ['angular-flexslider']); 

app.controller('MainCtrl', function ($scope) { 
    var ctrl = this; 
    $scope.prod = { imagePaths: [] }; 
    $scope.prod.imagePaths = [ 
     { custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg' }, 
     { custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg' }, 
     { custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg' }, 
     { custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg' }, 
     { custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg' }, 
     { custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg' }, 
     { custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg' }, 
     { custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg' }, 
     { custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg' }, 
     { custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg' }, 
     { custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg' }, 
     { custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg' } 
    ]; 
});

最后，图像视图的部分R /库页

<div id="container" ng-controller="MainCtrl"> 
    <div class="col-sm-12"> 
     <flex-slider slider-id="slider" flex-slide="image in prod.imagePaths track by $index" animation="fade" animation-loop="false" sync="#carousel" slideshow="false" control-nav="false" init-delay="100"> 
      <li> 
       <img ng-src="{{image.custom}}"> 
      </li> 
     </flex-slider> 
    </div> 
    <div class="col-sm-12"> 
     <flex-slider slider-id="carousel" flex-slide="image in prod.imagePaths track by $index" animation="slide" animation-loop="false" item-width="210" item-margin="5" as-nav-for="#slider" slideshow="false" control-nav="false"> 
      <li> 
       <img ng-src="{{image.thumbnail}}"> 
      </li> 
     </flex-slider> 
    </div> 

</div>

来源

2016-05-18 Brad

你必须注入所有的模块在一个单一的电话，所以你可以使用：

var app = angular.module('app', ['ngRoute','angular-flexslider']);

的方式目前你正在做它你的模块是摧毁时添加第二个模块。

来源

2016-05-18 19:12:21

好的，我明白你的意思。所以在我的mainCtrl中（我delcare app（var app = ...）这是我的第一个声明），然后在我的其他控件中，我写完该对象的第一个声明对象。有它的工作，我不应该在每个ctrl上声明应用程序变量（因为我在主要的顶部），只需引用应用程序变量。所以从其他控件中删除（var app = ...） – Brad

是，所以只需编辑你的第一个声明，以匹配我以上所做的 –

我做到了，但现在使用角度的页面上的角码（基于文本框的简单代码设置文本）不起作用，当我评论代码在控制本身在单独的页面上？ – Brad

angular JS添加图片库/查看器打破单页面路由

回答

相关问题