Angularjs slideshow weitermachen nicht ändern, wenn Sie zu einer anderen Seite navigieren

Ich arbeite an einem einseitigen App-Projekt. Ich denke, mein Problem ist nicht in der Lage, meine Diashow Inhalte zu einem Controller zuweisen. Siehe den Plünderer für weitere Details Background slideshow. (Das Problem mit dieser Klappe das Navigationsmenü nicht funktioniert, aber es funktioniert gut auf meiner Maschine, aber das ist nicht das Problem, ich suche nach einer Antwort.) Derzeit habe ich eine Liste der Diashows von Bildern in den HTML-Körper Wie nachfolgend dargestellt.Angularjs slideshow weitermachen nicht ändern, wenn Sie zu einer anderen Seite navigieren

<ul class='cb-slideshow'> 
    <li><span>Image 01</span><div><h3>London show</h3></div></li> 
    <li><span>Image 02</span><div><h3>Paris music show</h3></div></li> 
    <li><span>Image 03</span><div><h3>Belfast</h3></div></li> 
    <li><span>Image 04</span><div><h3>Luanda culture</h3></div></li> 
    <li><span>Image 05</span><div><h3>Rome night</h3></div></li> 
    <li><span>Image 06</span><div><h3>Victorial falls</h3></div></li> 
</ul>

app.js

$routeProvider 
    .when("/", { 
    template: "<div main-slide-show></div>" 
    }) 
    .when("/page1", { 
    templateUrl : "templates/page1.html", 
    controller : "page1Controller" 
    }) 
    .when("/page2", { 
    templateUrl : "templates/page2.html", 
    controller : "page2Controller" 
    })

Bitte beachten Sie, dies ist nur ein paar kleiner Teil meines Codes und es ist alles in Ordnung abgesehen von der Homepage arbeiten, die die Diashow stoppen sollen, wenn ich auf dem navbar Menü angeklickt Liste. Kann mir bitte jemand in die richtige Richtung weisen? Danke

Jemand auf dieser Seite hat die ähnliche Frage background image show gefragt, aber ich konnte es immer noch nicht herausfinden für mein Projekt.

Quelle

2017-06-20 Leni_14

wäre es toll, wenn Sie ein Plunker Demo, das Problem zu replizieren erstellen können. – Manish

@ Manish. Ok, hier ist Plocker http://embed.plnkr.co/tMaCF4Fxhte7lWsZHJiJ/ –

OK jetzt, was Sie wollen, ist, dass Controller mit Ihrer Diashow zugeordnet werden sollte. Und was ist mit Navigation. Für mich scheint es zu funktionieren, das einzige Problem, das ich sehen kann, ist das Fehlen von Vorlagendateien im Plunker. Bitte erläutern Sie das Problem. – Manish

Die Referenz Frage, die Sie tatsächlich in dieser der Vorlage erwähnt haben, die verwendet worden ist, ist tatsächlich eine Richtlinie. Sie müssen also eine Direktive für die Bildschirmpräsentation erstellen. Und geben Sie diese Anweisung als Vorlage in Ihrer Route an.

Hier ist Ihre Route

$locationProvider.hashPrefix(''); 
    $routeProvider.when("/", { 
     template: "<div main-slide-show></div>" 
    }) 
    .when("/page1", { 
     templateUrl: "page1.html", 
     controller: "firstController" 
    }) 
    .when("/page2", { 
     templateUrl: "page2.html", 
     controller: "secondController" 
    }) 
    .when("/page3", { 
     templateUrl: "page3.html", 
     controller: "thirdController" 
    })

})

und eine Richtlinie wie diese Below

.directive("mainSlideShow",function(){ 
    return{ 
    template:`<ul class='cb-slideshow'> 
      <li><span>Image 01</span><div><h3>se·ren·i·ty</h3></div></li> 
      <li><span>Image 02</span><div><h3>com·po·sure</h3></div></li> 
      <li><span>Image 03</span><div><h3>e·qua·nim·i·ty</h3></div></li> 
      <li><span>Image 04</span><div><h3>bal·ance</h3></div></li> 
      <li><span>Image 05</span><div><h3>qui·e·tude</h3></div></li> 
      <li><span>Image 06</span><div><h3>re·lax·a·tion</h3></div></li> 
     </ul>` 
    } 
})

erstellen ist Ihre index.html

<body> 
<div ng-app="myApp" ng-controller="firstController"> 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> <a class="navbar-brand" href="#/">Logo</a> 
     </div> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#/page1">Page1</a></li> 
     <li><a href="#/page2">Page2</a></li> 
     <li><a href="#/page3">Page3</a></li> 
     </ul> 
    </div> 
    </nav> 
    <div ng-view> 
    </div> 
    </div> 
    </body> 
</html>

Wenn Sie jetzt klick es wird n Gehe zur entsprechenden Seite und die Diashow verschwindet.

Hier ist die Updated Plunker

Hoffe, es hilft :)

Quelle

2017-06-20 11:18:48 Manish

Wow, es funktioniert, brilliant! Vielen Dank Manish –

Gern geschehen. freue mich zu helfen. Bitte markieren Sie es als Antworten, wenn es Ihr Problem gelöst hat. :) – Manish

Entschuldigung, ich habe vergessen, es zu markieren.Alles fertig, danke –

<ul class='cb-slideshow'> 
     <a href="#page1"><li><span>Image 01</span><div><h3>London show</h3></div></li></a> 
     <a href="#page2"> <li><span>Image 02</span><div><h3>Paris music show</h3></div></li></a> 
    </ul>

Versuchen Sie es.

http://plnkr.co/edit/CvbUjyYYWWVPYnbiX9Cg?p=preview

Quelle

2017-06-20 05:45:32 Komal

danke, aber immer noch nicht funktioniert hier ist Plunker http://embed.plnkr.co/tMaCF4Fxhte7lWsZHJiJ/ –

Jetzt funktioniert es – Komal

nur entfernen/von href – Komal

Angularjs slideshow weitermachen nicht ändern, wenn Sie zu einer anderen Seite navigieren

Antwort

Verwandte Themen