九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

Bootstrap和Angular都是人們大量使用的工具。在很多項(xiàng)目中，它們需要一起使用。為什么不呢？他們已經(jīng)改變了CSS和JS的開(kāi)發(fā)方式，讓前端既成為令人難以置信的工具。

但是，把它們放在一起使用還有一些問(wèn)題，特別是當(dāng)你試圖在Angular的項(xiàng)目中引入Bootstrap JavaScript組件時(shí)，會(huì)是一個(gè)問(wèn)題。當(dāng)建立了Angular的項(xiàng)目，##你不應(yīng)該添加完整的jQuery庫(kù)##。 jQlite已經(jīng)包含在Angular中的，所有jQuery必要的功能它都有。這是因?yàn)榘裫Query添加到Angular的項(xiàng)目將很難讓你完全掌握Angular的核心優(yōu)勢(shì)和數(shù)據(jù)綁定的力量。

比如你想在某種程度上改變View視圖，一個(gè)很好的做法是通過(guò)Angular所綁定的data數(shù)據(jù)來(lái)改變。我們寫這篇文章的目標(biāo)就是為了，學(xué)習(xí)用jQuery和Angular通過(guò)不同的手段達(dá)到相同的目的。

Bootstrap JavaScript和Angular問(wèn)題

這個(gè)問(wèn)題可以追溯到，你不應(yīng)該在你的Angular項(xiàng)目中使用jQuery的原則。jQuery操作視圖的方法與Angular操縱數(shù)據(jù)的方法會(huì)起沖突。

為什么你不應(yīng)該使用jQuery

您使用jQuery操作數(shù)據(jù)抓住并注入到DOM的方式基本上基于事件。當(dāng)我們使用Bootstrap JavaScript組件時(shí)，比如一個(gè)按鈕，我們需要“單擊此按鈕時(shí)，設(shè)置此按鈕為激活狀態(tài)”。并將這種設(shè)置添加入新加的按鈕中。通過(guò)添加 .active 類和檢查input（如果你的按鈕是一個(gè)input）為實(shí)現(xiàn)。

在Angular中，操縱數(shù)據(jù)不是通過(guò)抓取和注入。一般通過(guò)數(shù)據(jù)綁定來(lái)實(shí)現(xiàn)，野蠻抓取注入數(shù)據(jù)。也能夠改變每個(gè)組件的狀態(tài)，不過(guò)在切換時(shí)就會(huì)暴露出問(wèn)題。

這就是為什么我們不能直接用Bootstrap的JavaScript。它依賴于jQuery我們不希望jQuery的破壞我們的Angular項(xiàng)目。如果我們?cè)噲D綁定變量到組件，它無(wú)法工作。

解決方案： UI Bootstrap

那么該如何解決？我們從Angular得知，我們需要將數(shù)據(jù)綁定到一個(gè)特定的組件，我們應(yīng)該建立一個(gè)directive指令。這將讓我們的Angular網(wǎng)站，更關(guān)注數(shù)據(jù)的變化。

該解決方案是一種被稱為UI Bootstrap的項(xiàng)目。這是由Angular UI團(tuán)隊(duì)開(kāi)發(fā)的，增加了許多Angular的擴(kuò)展組件。UI Bootstrap不使用jQuery; 它為每個(gè)Bootstrap JS組件添加了內(nèi)置指令（directives）。

對(duì)于UI Bootstrap（非BootstrapJS）的要求是：

• 沒(méi)有jQuery的依賴
• 依賴Angular
• 依賴Bootstrap CSS文件

就是這樣?，F(xiàn)在，我們要如何將它集成到我們的項(xiàng)目？

我們的Angular應(yīng)用

讓我們來(lái)看看我們需要些什么設(shè)置。如果你已經(jīng)看過(guò)JavaScript代碼，你會(huì)看到我們創(chuàng)建了一個(gè)Angular模塊和控制器。然后，我們創(chuàng)建的按鈕和折疊的變量。

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

// 創(chuàng)建 angular app 導(dǎo)入 ui.bootstrap
angular.module('app', ['ui.bootstrap'])
.controller('mainController', function($scope) {
// BUTTONS ======================
// 設(shè)置數(shù)據(jù)
$scope.bigData = {};
$scope.bigData.breakfast = false;
$scope.bigData.lunch = false;
$scope.bigData.dinner = false;
// COLLAPSE =====================
$scope.isCollapsed = false;
});

現(xiàn)在，正確的使用方式是，當(dāng)按下按鈕時(shí)調(diào)整這些變量的值。

使用UI Bootstrap按鈕指令(Directive)

通過(guò)UI Bootstrap文檔 ，使用復(fù)選框按鈕正確的方法是添加 ng-model 的定義對(duì)象，并添加 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)在，當(dāng)我們點(diǎn)擊按鈕時(shí)，我們可以看到該模型的變化，就像我們希望的那樣。

使用UI Bootstrap折疊指令

對(duì)于折疊，我們將基于isCollapsed變量的值打開(kāi)和關(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)在，我們兩個(gè)組件都可以工作了！在美麗時(shí)尚的Angular中，設(shè)置一個(gè)變量，看著它影響一些視圖。

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