无法让Bootstrap轮播与Angular一起使用

时间：2016-02-19 10:40:16

标签： angularjs twitter-bootstrap

我正在尝试将Bootstrap Carousel Bootstrap放入Angular路径，但是左右按钮不起作用。

Angular route：

<!DOCTYPE html>
<html lang="en" ng-app="recipesApp">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script type="text/javascript" src="js/bootstrap.min.js"></script>

<script type="text/javascript">

  var recipesApp = angular.module('recipesApp', ['ngRoute']);

  recipesApp.config(function ($routeProvider) {
            $routeProvider.when("/", {
                templateUrl: "idea.html",
                controller: "mainController"
            });

            $routeProvider.when("/my_recipes", {
                templateUrl: "my_recipes.html",
                controller: "MyRecipesController"
            });

            $routeProvider.when("/list", {
                templateUrl: "list.html",
                controller: "ListController",

        })


        .controller('mainController', ['$scope', function ($scope) {


        }])


         .controller('MyRecipesController', ['$scope', function ($scope) {

        }])

         .controller('ListController', ['$scope', function ($scope) {

        }])


  </script>

 </head>


<body>

     <header>

        <div class="recipes">
            <span>Рецепты</span>
         </div>
     <nav>
        <li><a href="#/">Идеи</a></li>
        <li><a href="#/my_recipes">Мои рецепты</a></li>
        <li><a href="#/list">Списки</a></li>
     </nav>

     </header>

    <div class="view">
       <ng-view></ng-view>
    </div>
   </body>
 </html>

Carousel看起来很好，但左/右滚动按钮和页面指示器什么都不做。 使用СarouselBootstrap的应用程序的第一页：

 <div class="container">
       <div  class="main">
           <div class="what_to_cook">
             <span>Что приготовить сегодня?</span>
           </div>

             <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
               <li data-target="#carousel-example-generic" data-slide-to="1"></li>
               <li data-target="#carousel-example-generic" data-slide-to="2"></li>
              </ol>

              <!-- Wrapper for slides -->
              <div class="carousel-inner">
                <div class="item active">
                  <img src="http://andychef.ru/wp-content/uploads/2016/02/DSC07364.jpg" alt="...">
                  <div class="carousel-caption">
                      <h3>Caption Text</h3>
                  </div>
                </div>
                <div class="item">
                  <img src="http://andychef.ru/wp-content/uploads/2016/02/DSC06995.jpg" alt="...">
                  <div class="carousel-caption">
                      <h3>Caption Text</h3>
                  </div>
                </div>
                <div class="item">
                  <img src="http://andychef.ru/wp-content/uploads/2016/01/DSC06427.jpg" alt="...">
                  <div class="carousel-caption">
                      <h3>Caption Text</h3>
                  </div>
                </div>
              </div>

              <!-- Controls -->
              <a class="left carousel-control" data-target="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
              </a>
              <a class="right carousel-control" data-target="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
              </a>
            </div> <!-- Carousel -->

        </div>
     </div>

1 个答案:

答案 0 :(得分：0)

尝试使用以下代码，它将帮助您解决问题。

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">

  var recipesApp = angular.module('recipesApp', ['ngRoute']);

  recipesApp.config(function ($routeProvider) {
            $routeProvider.when("/", {
                templateUrl: "idea.html",
                controller: "mainController"
            });

            $routeProvider.when("/my_recipes", {
                templateUrl: "my_recipes.html",
                controller: "MyRecipesController"
            });

            $routeProvider.when("/list", {
                templateUrl: "list.html",
                controller: "ListController",

        })


        .controller('mainController', ['$scope', function ($scope) {


        }])


         .controller('MyRecipesController', ['$scope', function ($scope) {

        }])

         .controller('ListController', ['$scope', function ($scope) {

        }])


  </script>
</head>
 <body>
<header>

        <div class="recipes">
            <span>Рецепты</span>
         </div>
     <nav>
        <li><a href="#/">Идеи</a></li>
        <li><a href="#/my_recipes">Мои рецепты</a></li>
        <li><a href="#/list">Списки</a></li>
     </nav>

     </header>

    <div class="view">
       <ng-view></ng-view>
    </div>
   <div class="container">
       <div  class="main">
           <div class="what_to_cook">
             <span>Что приготовить сегодня?</span>
           </div>

             <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
               <li data-target="#carousel-example-generic" data-slide-to="1"></li>
               <li data-target="#carousel-example-generic" data-slide-to="2"></li>
              </ol>

              <!-- Wrapper for slides -->
              <div class="carousel-inner">
                <div class="item active">
                  <img src="http://andychef.ru/wp-content/uploads/2016/02/DSC07364.jpg" alt="...">
                  <div class="carousel-caption">
                      <h3>Caption Text</h3>
                  </div>
                </div>
                <div class="item">
                  <img src="http://andychef.ru/wp-content/uploads/2016/02/DSC06995.jpg" alt="...">
                  <div class="carousel-caption">
                      <h3>Caption Text</h3>
                  </div>
                </div>
                <div class="item">
                  <img src="http://andychef.ru/wp-content/uploads/2016/01/DSC06427.jpg" alt="...">
                  <div class="carousel-caption">
                      <h3>Caption Text</h3>
                  </div>
                </div>
              </div>

              <!-- Controls -->
              <a class="left carousel-control" data-target="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
              </a>
              <a class="right carousel-control" data-target="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
              </a>
            </div> <!-- Carousel -->

        </div>
     </div>
   </body>
 </html>

相关问题
最新问题