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

相关文章