Bootstrap将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
)!

Bootstrap 1

近期,正确的施用情势是,当按下按钮时调整那么些变量的值。

选取UI Bootstrap按钮指令(Directive)

经过UI Bootstrap文档 ,使用复选框按钮正确的措施是添加 ng-model
的概念对象,并添加 btn-checkbox 属性。下边是我们按钮的代码:

Bootstrap 2

明日,当大家点击按钮时,我们得以看到该模型的成形,似乎大家期望的那样。

利用UI Bootstrap折叠指令

对于折叠,大家将根据isCollapsed变量的值打开和关闭面板。因而,大家将选用ng-click=”isCollapsed=!isCollapsed”。这将触及大家的isCollapsed变量从而切换面板。

Bootstrap 3

当今,大家三个零部件都可以干活了!在漂亮前卫的Angular中,设置一个变量,望着它影响局地视图。

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

相关文章