Angularjs幻燈片瀏覽其他頁面時不會改變

我正在處理單個頁面的應用程序項目。我認爲我的問題是無法將我的幻燈片內容分配給控制器。請參閱深入瞭解Background slideshow的更多細節。（導航菜單無法正常工作的問題，但它在我的機器上工作良好，但這不是我正在尋找答案的問題。）目前，我有一個html體內圖像幻燈片顯示列表如下所示。Angularjs幻燈片瀏覽其他頁面時不會改變

<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" 
    })

請注意，這是我的代碼只是一些小的一部分，其所有從主頁當我點擊導航欄菜單上應停止幻燈片放映工作天晴名單。任何人都可以指導我在正確的方向請。謝謝

本網站有人問過類似的問題background image show但我仍然無法弄清楚我的項目。

來源

2017-06-20 Leni_14

這將是巨大的，如果你可以創建一個Plunker演示覆制的問題。 – Manish

@ Manish。好的，這裏是plunker http://embed.plnkr.co/tMaCF4Fxhte7lWsZHJiJ/ –

好吧，現在你想要的是，應該有與您的幻燈片相關的控制器。那麼導航呢。對我來說，似乎工作正常，我可以看到的唯一問題是沒有模板文件在蹲點。請詳細說明問題.. – Manish

你在已使用的模板實際上提到的參考的問題實際上是一個指令。所以你需要爲幻燈片創建一個指令。並將該指令作爲路線中的模板。

這是你的路線

$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" 
    })

}）

，創建這樣

.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>` 
    } 
})

下面一個指令是您的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>

現在，當你點擊它將n轉到相應的頁面，幻燈片將消失。

這裏是Updated Plunker

希望它能幫助:)

來源

2017-06-20 11:18:48 Manish

哇，它的工作，輝煌！非常感謝Manish –

不客氣。樂於幫助。如果它解決了您的問題，請將其標記爲答案。 :) – Manish

對不起，我忘了標記它。現在全部完成了，謝謝 –

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

試試這個。

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

來源

2017-06-20 05:45:32 Komal

謝謝，但仍然沒有在這裏工作是強盜http://embed.plnkr.co/tMaCF4Fxhte7lWsZHJiJ/ –

現在它的工作 – Komal

只是刪除/從href – Komal

Angularjs幻燈片瀏覽其他頁面時不會改變

回答

相關問題