將BootstrapJS和AngularJS結合使用以及爲何不用jQuery

原文網址連接：http://ourjs.com/detail/54e18c51232227083e000034
Bootstrap  和 Angular  都是人們大量使用的工具。在不少項目中，它們須要一塊兒使用。爲何不呢？他們已經改變了CSS和JS的開發方式，讓前端既成爲使人難以置信的工具。

可是，把它們放在一塊兒使用還有一些問題，特別是當你試圖在Angular的項目中引入Bootstrap JavaScript組件時，會是一個問題。當創建了Angular的項目，##你不該該添加完整的jQuery庫##。 jQlite已經包含在Angular中的，全部jQuery必要的功能它都有。這是由於把jQuery添加到Angular的項目將很難讓你徹底掌握Angular的核心優點和數據綁定的力量。

好比你想在某種程度上改變View視圖，一個很好的作法是經過Angular所綁定的data數據來改變。咱們寫這篇文章的目標就是爲了，學習用jQuery和Angular經過不一樣的手段達到相同的目的。

Bootstrap JavaScript和Angular問題

這個問題能夠追溯到，你不該該在你的Angular項目中使用jQuery的原則。jQuery操做視圖的方法與Angular操縱數據的方法會起衝突。

爲何你不該該使用jQuery

您使用jQuery操做數據抓住並注入到DOM的方式基本上基於事件。當咱們使用Bootstrap JavaScript組件時，好比一個按鈕，咱們須要「單擊此按鈕時，設置此按鈕爲激活狀態」。並將這種設置添加入新加的按鈕中。經過添加 .active 類和檢查input（若是你的按鈕是一個input）爲實現。

在Angular中，操縱數據不是經過抓取和注入。通常經過數據綁定來實現，野蠻抓取注入數據。也可以改變每一個組件的狀態，不過在切換時就會暴露出問題。

這就是爲何咱們不能直接用Bootstrap的JavaScript。它依賴於jQuery咱們不但願jQuery的破壞咱們的Angular項目。若是咱們試圖綁定變量到組件，它沒法工做。

解決方案： UI Bootstrap

那麼該如何解決？咱們從Angular得知，咱們須要將數據綁定到一個特定的組件，咱們應該創建一個directive 指令。這將讓咱們的Angular網站，更關注數據的變化。

該解決方案是一種被稱爲UI Bootstrap 的項目。這是由Angular UI團隊開發的，增長了許多Angular的擴展組件。UI Bootstrap不使用jQuery; 它爲每一個Bootstrap JS組件添加了內置指令（directives）。

對於UI Bootstrap（非BootstrapJS）的要求是：

• 沒有jQuery的依賴

• 依賴Angular

• 依賴Bootstrap CSS文件

就是這樣。如今，咱們要如何將它集成到咱們的項目？

咱們的Angular應用

讓咱們來看看咱們須要些什麼設置。若是你已經看過JavaScript代碼，你會看到咱們建立了一個Angular模塊和控制器。而後，咱們建立的按鈕和摺疊的變量。

爲此，下一步就是要拿到UI Bootstrap的文件，放到咱們的項目中。那麼咱們可以在咱們的Angular模塊中導入ui.bootstrap。就這樣，咱們就可以獲取須要模仿BootstrapJS組件的指令（directives ）！

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

使用UI Bootstrap按鈕指令(Directive)

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

如今，當咱們點擊按鈕時，咱們能夠看到該模型的變化，就像咱們但願的那樣。

使用UI Bootstrap摺疊指令

對於摺疊，咱們將基於isCollapsed變量的值打開和關閉面板。所以，咱們將使用 ng-click="isCollapsed=!isCollapsed"。這將觸發咱們的isCollapsed變量從而切換面板。

如今，咱們兩個組件均可以工做了！在美麗時尚的Angular中，設置一個變量，看着它影響一些視圖。

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