Question

我正在处理单页应用项目。我认为我的问题是无法将我的幻灯片内容分配给控制器。请参阅plunker以获取更多详细信息Background slideshow。（导航菜单无法正常工作，但是它在我的机器上运行良好，但这并不是我寻找答案的问题。）目前我有一个html体内图像幻灯片列表，如下所示。

<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，但我仍然无法弄清楚我的项目。

Answer 1

 <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

Answer 2

您提到的参考问题实际上是已使用的模板实际上是一个指令。所以你需要为幻灯片放映创建一个指令。并将该指令作为您路线中的模板。

这是你的路线

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

现在单击它将导航到相应的页面，幻灯片将消失。

以下是 Updated Plunker

希望有所帮助：）

导航到其他页面时，Angularjs幻灯片不会改变

2 个答案: