將BootstrapJS和AngularJS結合使用以及為什么不用jQuery

Bootstrap JavaScript和Angular問題

為什么你不應該使用jQuery

解決方案： UI Bootstrap

• 沒有jQuery的依賴
• 依賴Angular
• 依賴Bootstrap CSS文件
</ul>


就是這樣。現在，我們要如何將它集成到我們的項目？





我們的Angular應用



讓我們來看看我們需要些什么設置。如果你已經看過JavaScript代碼，你會看到我們創建了一個Angular模塊和控制器。然后，我們創建的按鈕和折疊的變量。


為此，下一步就是要拿到UI Bootstrap的文件，放到我們的項目中。那么我們能夠在我們的Angular模塊中導入ui.bootstrap。就這樣，我們就能夠獲取需要模仿BootstrapJS組件的指令（directives ）！





    // 創建 angular app 導入 ui.bootstrap


    angular.module('app', ['ui.bootstrap'])


    


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


      


      // BUTTONS ======================


    


      // 設置數據


      $scope.bigData = {};


      


      $scope.bigData.breakfast = false;


      $scope.bigData.lunch = false;


      $scope.bigData.dinner = false;


      


      // COLLAPSE =====================


      $scope.isCollapsed = false;


      


    });
</pre> 






現在，正確的使用方式是，當按下按鈕時調整這些變量的值。 




使用UI Bootstrap按鈕指令(Directive) 




通過UI Bootstrap文檔 ，使用復選框按鈕正確的方法是添加 ng-model 的定義對象，并添加 btn-checkbox 屬性。下面是我們按鈕的代碼： 








    <div class="btn-group" data-toggle="buttons">


    


        <label class="btn btn-primary" ng-model="bigData.breakfast" btn-checkbox>


          Breakfast


        </label>


    


        <label class="btn btn-primary" ng-model="bigData.lunch" btn-checkbox>


          Lunch


        </label>


    


        <label class="btn btn-primary" ng-model="bigData.dinner" btn-checkbox>


          Dinner


        </label>


    


    </div>
</pre> 






現在，當我們點擊按鈕時，我們可以看到該模型的變化，就像我們希望的那樣。 




使用UI Bootstrap折疊指令 




對于折疊，我們將基于isCollapsed變量的值打開和關閉面板。因此，我們將使用 ng-click="isCollapsed=!isCollapsed"。這將觸發我們的isCollapsed變量從而切換面板。 








    <div class="panel panel-default">


        <div class="panel-heading">


          <h4 class="panel-title">


            <a href="#" ng-click="isCollapsed = !isCollapsed">


              Collapsible Group Item #1


            </a>


          </h4>


        </div>


        <div collapse="isCollapsed">


          <div class="panel-body">Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.


          </div>


        </div>


    </div>


    
</pre> 



現在，我們兩個組件都可以工作了！在美麗時尚的Angular中，設置一個變量，看著它影響一些視圖。 







在線示例: http://codepen.io/sevilayha/pen/ExKGs 




來自：http://ourjs.com/detail/54e18c51232227083e000034

                    

                        
 本文由用戶 jopen  自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                        
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                        
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                        
 
本文地址：http://www.baiduhome.net/news/view/fba7d5                        
                        
 BootstrapJS