本文共 8232 字，大约阅读时间需要 27 分钟。
bootstrapjs
and are tools that a great number of people use. Often times, they are used together in projects. And why shouldn't they be? They are both incredible tools that have changed the way CSS and JS work on the frontend.
和是许多人使用的工具。 通常，它们在项目中一起使用。 为什么不呢？ 它们都是令人难以置信的工具，它们改变了CSS和JS在前端的工作方式。
There is a problem when using them together though, specifically when you try to bring in the Bootstrap JavaScript components into an Angular project. When building out Angular projects, you should not add on the full jQuery library. jQlite is already included in Angular and this should be all the jQuery that is necessary. This is an important concept to grasp since bringing jQuery into your Angular project will make it harder for you to fully grasp the power of Angular and its data-binding goodness.
但是，将它们一起使用时会出现问题，特别是当您尝试将Bootstrap JavaScript组件引入Angular项目时。 构建Angular项目时，不应添加完整的jQuery库 。 jQlite已经包含在Angular中，这应该是所有必需的jQuery。 这是一个很重要的概念，因为将jQuery引入Angular项目会使您更加难以完全掌握Angular的功能及其数据绑定优势。
If you want to change the view in some way, it is a good practice to change your views based on your Angular data. We'll examine exactly what this means in this article since the Bootstrap JS components provide an opportunity to learn the differences in how jQuery and Angular are used differently for the same goals (like an accordion).
如果要以某种方式更改视图，则最好根据Angular数据更改视图。 由于Bootstrap JS组件提供了一个机会来学习jQuery和Angular在相同目标（如手风琴）上的不同用法方面的差异，因此我们将仔细研究本文的含义。
Today, we'll be looking a bit at the problems of Bootstrap JS and Angular together, why you shouldn't use the Bootstrap JS library that relies on jQuery, and the best alternative to get the Bootstrap JS components we know and love into our Angular projects (UI Bootstrap).
今天，我们将一起探讨Bootstrap JS和Angular的问题，为什么不应该使用依赖jQuery的Bootstrap JS库，以及将我们熟悉和喜爱的Bootstrap JS组件引入我们的最佳选择角度项目（UI Bootstrap）。
This problem goes back to the rule that you shouldn't use jQuery in your projects. The way jQuery works to manipulate data in your views fights directly with how you use Angular to manipulate your views.
这个问题回到了规则，即您不应在项目中使用jQuery。 jQuery在视图中操作数据的方式直接与使用Angular来操作视图的方式抗衡。
The way you manipulate data with jQuery is essentially grabbing and injecting into your DOM based on events. So when we use the Bootstrap JavaScript components, like a , we are saying "when this button is clicked, toggle this button to active". This will set the button to active by adding an .active class and checking an input box (if your button is an input checkbox).
使用jQuery处理数据的方式实质上是基于事件来获取并注入到DOM中。 因此，当我们使用Bootstrap JavaScript组件（如 ，就是说“单击此按钮时，将此按钮切换为活动状态”。 这将通过添加.active类并选中输入框（如果您的按钮是输入复选框）来将按钮设置为活动状态。
With Angular, manipulating data isn't a grab and inject sort of affair. Things are data-bound so we don't need to do all that barbaric grab and inject stuff. We should be able to bind a variable to each component (button or collapse) and then toggle it based on the true/false nature of that variable.
使用Angular，处理数据并不是一件容易的事情。 事物是受数据约束的，因此我们不需要做所有的野蛮抢劫和注入工作。 我们应该能够将变量绑定到每个组件（按钮或折叠），然后根据该变量的真/假性质对其进行切换。
This is why we can't just use Bootstrap JavaScript. It relies on jQuery and we don't want jQuery rummaging around our Angular projects. If we try to bind variables to the components, it won't work.
这就是为什么我们不能只使用Bootstrap JavaScript的原因。 它依赖于jQuery，我们不希望jQuery在我们的Angular项目中翻腾。 如果我们尝试将变量绑定到组件，它将无法正常工作。
See the Pen by Chris Sevilleja () on .
在查看Chris （ ）的Pen 。
Now we could totally create a couple Angular functions like toggleButton() and then call that on an ng-click but we shouldn't have to do hacky things like that. Angular's data binding should allow us to set a variable and watch it mirror to all the places the variable is referenced.
现在，我们可以完全创建几个Angular函数，例如toggleButton() ，然后在ng-click上调用它，但是我们不必做这样的改动。 Angular的数据绑定应允许我们设置一个变量，并使其镜像到引用该变量的所有位置。
So what is the solution? We are taught in Angular that whenever we want to bind data to a certain component, we should build a . This will let Angular know that a specific part of our site should be watched for data changes.
那么解决方案是什么？ Angular告诉我们，每当我们要将数据绑定到某个组件时，都应该构建一个 。 这将使Angular知道应该注意我们网站的特定部分的数据更改。
The solution is a project called . These are built by the that adds many components to extend Angular. The UI Bootstrap doesn't use jQuery and are directives built from the ground up for each of the Bootstrap JS components.
解决方案是一个名为的项目。 这些是由构建的，该添加了许多组件来扩展Angular。 UI Bootstrap不使用jQuery，并且是从头开始为每个Bootstrap JS组件构建的指令 。
The requirements for UI Bootstrap (unlike BootstrapJS) are:
UI Bootstrap的要求（与BootstrapJS不同）是：
That's it. Now how do we integrate it into our projects?
而已。 现在我们如何将其集成到我们的项目中？
Let's take a look at what our setup is to make this work. If you already looked at the JavaScript code, you'll see that we created an Angular module and controller. Then we created variables for the buttons and for the collapse.
让我们看一下如何进行设置。 如果您已经看过JavaScript代码，就会看到我们创建了Angular模块和控制器。 然后，我们为按钮和折叠创建了变量。
The next step for this is to grab the UI Bootstrap file and include that in our project. Then we are able to inject ui.bootstrap into our Angular module. Just like that, we have all the directives we need to mimic the Bootstrap JS components!
下一步是获取UI Bootstrap文件，并将其包含在我们的项目中。 然后，我们可以将ui.bootstrap注入到我们的Angular模块中。 就像那样，我们拥有模仿Bootstrap JS组件所需的所有指令！
// create our angular app and inject ui.bootstrapangular.module('app', ['ui.bootstrap']).controller('mainController', function($scope) { // BUTTONS ====================== // define some random object and button values $scope.bigData = {}; $scope.bigData.breakfast = false; $scope.bigData.lunch = false; $scope.bigData.dinner = false; // COLLAPSE ===================== $scope.isCollapsed = false;}); Now, the correct way to use these would be to adjust the value of these variables when a button is pressed.
现在，使用这些变量的正确方法是在按下按钮时调整这些变量的值。
Per the , the correct way to use checkbox buttons is to add the ng-model for what it defines, and to add the btn-checkbox attribute. Here's the code for our buttons:
根据 ，使用复选框按钮的正确方法是为其定义的对象添加ng-model ，并添加btn-checkbox属性。 这是我们按钮的代码：
Now, we can see the model change as we click our buttons, just like we would expect them to.
现在，当我们单击按钮时，我们可以看到模型发生了变化，就像我们期望的那样。
For the collapse, we will open and close the panel based on the true/false value of the isCollapsed variable. So we will use ng-click="isCollapsed = !isCollapsed". This will toggle our isCollapsed variable which in turn will toggle our panel.
对于折叠，我们将基于isCollapsed变量的true/false值打开和关闭面板。 因此，我们将使用ng-click="isCollapsed = !isCollapsed" 。 这将切换我们的isCollapsed变量，而该变量又将切换我们的面板。
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.
Now both of our components works! And in beautiful Angular fashion, set a variable, see it affect something in the view.
现在，我们两个组件都可以工作了！ 并以漂亮的Angular方式设置变量，然后在视图中看到它会影响某些内容 。
See the Pen by Chris Sevilleja () on .
在查看Chris （ ）的Pen 。
I'd encourage you to look through the to see all the directives they provide to match the Bootstrap JS components.
我鼓励您浏览以查看它们提供的与Bootstrap JS组件匹配的所有指令。
Just keep in mind that this great tool exists when integrating Bootstrap JavaScript and Angular. The directives are there to make projects easier to deal with and create them in the Angular way.
请记住，在集成Bootstrap JavaScript和Angular时存在此强大工具。 这些指令可以使项目更易于处理并以Angular方式创建它们。
Thanks for reading and sound off in the comments if you have any questions, know of any other tools, or just really like UI Bootstrap.
感谢您的阅读，如果您有任何疑问，对任何其他工具的了解，或者真的像UI Bootstrap一样，请在注释中忽略不计。
翻译自:
bootstrapjs
转载地址：http://mnywd.baihongyu.com/