Bootstrap和Angular都是人們大量使用的工具。在很多項目中，它們需要一起使用。為什么不呢？他們已經(jīng)改變了CSS和JS的開發(fā)方式，讓前端既成為令人難以置信的工具。
但是，把它們放在一起使用還有一些問題，特別是當你試圖在Angular的項目中引入Bootstrap JavaScript組件時，會是一個問題。當建立了Angular的項目，##你不應該添加完整的jQuery庫##。 jQlite已經(jīng)包含在Angular中的，所有jQuery必要的功能它都有。這是因為把jQuery添加到Angular的項目將很難讓你完全掌握Angular的核心優(yōu)勢和數(shù)據(jù)綁定的力量。
比如你想在某種程度上改變View視圖，一個很好的做法是通過Angular所綁定的data數(shù)據(jù)來改變。我們寫這篇文章的目標就是為了，學習用jQuery和Angular通過不同的手段達到相同的目的。
這個問題可以追溯到，你不應該在你的Angular項目中使用jQuery的原則。jQuery操作視圖的方法與Angular操縱數(shù)據(jù)的方法會起沖突。
您使用jQuery操作數(shù)據(jù)抓住并注入到DOM的方式基本上基于事件。當我們使用Bootstrap JavaScript組件時，比如一個按鈕，我們需要“單擊此按鈕時，設置此按鈕為激活狀態(tài)”。并將這種設置添加入新加的按鈕中。通過添加 .active 類和檢查input（如果你的按鈕是一個input）為實現(xiàn)。
在Angular中，操縱數(shù)據(jù)不是通過抓取和注入。一般通過數(shù)據(jù)綁定來實現(xiàn)，野蠻抓取注入數(shù)據(jù)。也能夠改變每個組件的狀態(tài)，不過在切換時就會暴露出問題。
這就是為什么我們不能直接用Bootstrap的JavaScript。它依賴于jQuery我們不希望jQuery的破壞我們的Angular項目。如果我們試圖綁定變量到組件，它無法工作。
那么該如何解決？我們從Angular得知，我們需要將數(shù)據(jù)綁定到一個特定的組件，我們應該建立一個directive指令。這將讓我們的Angular網(wǎng)站，更關(guān)注數(shù)據(jù)的變化。
該解決方案是一種被稱為UI Bootstrap的項目。這是由Angular UI團隊開發(fā)的，增加了許多Angular的擴展組件。UI Bootstrap不使用jQuery; 它為每個Bootstrap JS組件添加了內(nèi)置指令（directives）。
對于UI Bootstrap（非BootstrapJS）的要求是：
就是這樣?，F(xiàn)在，我們要如何將它集成到我們的項目？
讓我們來看看我們需要些什么設置。如果你已經(jīng)看過JavaScript代碼，你會看到我們創(chuàng)建了一個Angular模塊和控制器。然后，我們創(chuàng)建的按鈕和折疊的變量。
為此，下一步就是要拿到UI Bootstrap的文件，放到我們的項目中。那么我們能夠在我們的Angular模塊中導入ui.bootstrap。就這樣，我們就能夠獲取需要模仿BootstrapJS組件的指令（directives ）！
// 創(chuàng)建 angular app 導入 ui.bootstrap
angular.module('app', ['ui.bootstrap'])
.controller('mainController', function($scope) {
// BUTTONS ======================
// 設置數(shù)據(jù)
$scope.bigData = {};
$scope.bigData.breakfast = false;
$scope.bigData.lunch = false;
$scope.bigData.dinner = false;
// COLLAPSE =====================
$scope.isCollapsed = false;
});
現(xiàn)在，正確的使用方式是，當按下按鈕時調(diào)整這些變量的值。
通過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>
現(xiàn)在，當我們點擊按鈕時，我們可以看到該模型的變化，就像我們希望的那樣。
對于折疊，我們將基于isCollapsed變量的值打開和關(guān)閉面板。因此，我們將使用 ng-click="isCollapsed=!isCollapsed"。這將觸發(fā)我們的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>
現(xiàn)在，我們兩個組件都可以工作了！在美麗時尚的Angular中，設置一個變量，看著它影響一些視圖。
