堆棧內存溢出
  簡體   English   中英

無法使Bootstrap輪播與Angular一起使用

[英]Can't get Bootstrap carousel working with Angular

 原文  2016-02-19 10:40:15  4   1    angularjs/ twitter-bootstrap

問題描述

我正在嘗試將Bootstrap Carousel Bootstrap放入Angular路線，但是左右按鈕不起作用。

角線： 

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

旋轉木馬看起來還不錯，但是向左/向右滾動按鈕和頁面指示器什么也沒做。 С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 個解決方案

解決方案1
 0  2016-02-19 10:52:38

嘗試使用以下代碼，它將幫助您解決問題。 

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 無法使旋轉木馬工作 Angular Bootstrap Carousel Slide Transition無法正常工作 MEAN.JS和角度自舉旋轉木馬不工作 Angular UI-Bootstrap輪播無法正常工作 無法使bootstrap multiselect與角工作 Angular Bootstrap指令Typeahead驗證無法正常工作……無法獲取更新的模型信息 帶角js的旋轉木馬自舉 Bootstrap輪播和Angular SPA Angular Js引導輪播 Angular UI Bootstrap輪播無法正常工作-顯示靜態圖像
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM