AngularJS Остановка CSS-слайд-шоу с изображением всех страниц с ng-route

Я делаю свой проект AngularJS с ng-route, и все работает отлично, но проблема в том, что у меня есть полное слайд-шоу CSSC, которое я внедрил в форме этого сайта http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/, которые работают хорошо. Когда я нажимаю на другие страницы, содержание показывается, но показ слайдов также перемещается/переходит в фоновом режиме. Я хочу остановить это. Я хочу, чтобы показ слайдов отображался только на странице index.html. Любые решения будут оценены.AngularJS Остановка CSS-слайд-шоу с изображением всех страниц с ng-route

--- HTML код ---

<body ng-app="bigBlue"> <!--angular directive--> 

    <div main-page-navbar></div> <!--angular navbar directive--> 

    <div main-slide-show> </div> <!--angular side show directive--> 

    <div ng-view ></div> 


    <!-- Additional Java Script Files --> 
    <script src="bower_components/jquery/dist/jquery.min.js"></script> 
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 
    <!-- Angular Files --> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/angular/angular-route/angular-route.js"></script> 
    <!-- Module/directives --> 
    <script src="js/app.js"></script> 
    <script src="js/directives/main-content.js"></script> 

</body>

------- Код директивы Navbar --------

<body> 
    <nav class="navbar navbar-inverse navbar-static-top"> 
     <div class="container-fluid"> 
      <div class="navbar-header"><a class="navbar-brand navbar-link" href="#/">Big Blue</a> 
       <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> 
      </div> 
      <div class="collapse navbar-collapse" id="navcol-1"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li class="active" role="presentation"><a href="#/">Home </a></li> 
        <li role="presentation"><a href="#overview">Overview </a></li> 
        <li role="presentation"><a href="#map">Map </a></li> 
       </ul> 
      </div> 
     </div> 
    </nav>

------ директивный код слайд-шоу --------

<ul class="cb-slideshow"> 
      <li><span>Image 01</span><div><h3>endangered</h3></div></li> 
      <li><span>Image 02</span><div><h3>powerful</h3></div></li> 
      <li><span>Image 03</span><div><h3>caring</h3></div></li> 
      <li><span>Image 04</span><div><h3>loyal</h3></div></li> 
      <li><span>Image 05</span><div><h3>intelligent</h3></div></li> 
      <li><span>Image 06</span><div><h3>serene</h3></div></li> 
     </ul>

---- Угловая Код ----

var app = angular.module("bigBlue", ["ngRoute"]);/* Новый модуль называется большой голубой */

app.config(function($routeProvider) { 
    $routeProvider 
    .when('/overview', { 
     templateUrl : 'overview.html', 
     controller : 'whaleController' 
    }) 
    .when('/map', { 
     templateUrl : 'map.html', 
     controller : 'MapController', 
    }) 

    .otherwise({ 
    redirectTo : '/' 
    }); 


});

источник

2016-08-16 Jonathan

Вы должны переместить директиву слайд-шоу в контексте индекс вместо контекста всего приложения. Что-то вроде этого:

app.config(function($routeProvider) { 
    $routeProvider 
    .when('/', { 
     template: '<div main-slide-show></div>' 
    }) 
    .when('/overview', { 
     templateUrl : 'overview.html', 
     controller : 'whaleController' 
    }) 
    .when('/map', { 
     templateUrl : 'map.html', 
     controller : 'MapController', 
    }) 

    .otherwise({ 
     redirectTo : '/' 
    }); 
});

И вытащите указатель слайд-шоу из разметки.

источник

2016-08-16 21:00:35

Wow it WORKS! Я бы никогда не подумал об этом. Теперь я знаю, что могу вызвать директиву через ng-route, не будучи непосредственно зафиксированным в html-знаке вверх – Jonathan

AngularJS Остановка CSS-слайд-шоу с изображением всех страниц с ng-route

ответ

Смежные вопросы