用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

相关文章