Question

我正在尝试在角度spa应用程序中使用bootstrap轮播，并且在让它自动滑动时遇到问题。如果我将它放在常规的html页面中，一切都按预期工作。我已经尝试过多次在stackoverflow上找到的解决方案（大多数仍在代码中，但已注释掉），但似乎没有任何效果。以下是我的三个文件（app.js，index.html和home.html）。

app.js

(function () {
  'use strict';
  window.app = angular.module('app', ['ui.router']);
  app.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/');

  $stateProvider
      .state('home', {
        url: '/',
        templateUrl:'/views/stackoverflow/home.html',
        onEnter: function() {
          $('.carousel').carousel({interval: 300, pause:false});
          //$('.carousel').carousel('cycle');
          //$('.carousel').carousel().next();
          //$('.carousel-control.right').trigger('click');
        }
      })
  });

  app.run(function($rootScope, $location) {
    $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
        console.log("toState",toState);
        if ( toState.templateUrl === '/views/stackoverflow/home.html' ) {
            $('.carousel').carousel({interval: 300, pause:false});
            $('.carousel').carousel('cycle');
            //$('.carousel').carousel().next();
            //$('.right.carousel-control').trigger('click');
            //$('.right.carousel-control').click();
        }
    });
  })
}());

的index.html

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>My App</title>
    <link href="http://netdna.bootstrapcdn.com/bootswatch/3.2.0/cerulean/bootstrap.min.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/content/bootstrap/css/bootstrap.css" />
    <script src="/content/jquery/jquery.js"></script>
    <style>
        [ng-cloak] {display:none !important;}
    </style>
  </head>
  <body>
    <div ui-view ng-cloak></div>
  </body>
  <script src="/content/bootstrap/js/bootstrap.js"></script>
  <script src="/content/angular/angular.js"></script>
  <script src="/content/angular-ui-route/angular-ui-router.js"></script>
  <script src="/app/app.js"></script>
</html>

main.html中

<nav class="navbar navbar-inverse navbar-static-top"> </nav>
<div class="container-fluid">
  <div class="container-fluid">
    <div id="mainCarousel" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#product-info-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#product-info-carousel" data-slide-to="1"></li>
        <li data-target="#product-info-carousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="/images/image-1.png" alt="item1">
          <div class="carousel-caption">
            <h3>First Slide Label</h3>
            <p>Praesent commodo cursus magna, vel</p>
          </div>
        </div>
        <div class="item">
          <img src="/images/image-2.png" atl="item2">
          <div class="carousel-caption">
            <h3>Second Slide Label</h3>
            <p>Praesent commodo cursus magna, vel</p>
          </div>
        </div>
        <div class="item">
          <img src="/images/image-3.png" atl="item3">
          <div class="carousel-caption">
            <h3>Third Slide Label</h3>
            <p>Praesent commodo cursus magna, vel</p>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#mainCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#mainCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
  <div class="container">
    <div class="navbar navbar-inverse navbar-fixed-bottom">
      <div class="navbar-inner navbar-content-center">
        <p>
        </p>
      </div>
    </div>
  </div>
</div>

Answer 1

您需要手动启动旋转木马。因此，请确保您正在使用onEnter函数（只需在chrome / firefox控制台中查找错误）

我会改变函数：

$('.carousel').carousel({interval: 300, pause:false});

包括周期：

$('.carousel').carousel({interval: 300, cycle:true });

如果它仍然不起作用，你可以转向另一个方向并打电话给

$(document).ready(function() { $('#mainCarousel').carousel({ interval: 300 })});

Bootstrap Carousel和Angular SPA

1 个答案: