jQuery、jQueryUI（和插件）和 AngularJS——它们是如何组合在一起的？答案

【问题标题】：jQuery, jQueryUI (and plugins) and AngularJS - how do they all fit together?jQuery、jQueryUI（和插件）和 AngularJS——它们是如何组合在一起的？
【发布时间】：2014-01-19 17:50:06
【问题描述】：

我有这个网站（希伯来语）：http://www.iping.co.il（如果你可以用谷歌翻译看看它，看看它做了什么，它可能很棒，但不是必须的）。

它基本上是一个显示您的 IP 的网站，并为您提供一组工具（如 ping、whois 检查、开放端口检查...）。

我已经构建了一段时间，我使用 jQuery 和 jQuery UI 来完成所有工作（例如打开对话框、调用服务器、更改 DOM、显示进度条......）。

现在我正在重建它 - 我正在使用 ASP.NET MVC 5、HTML5 和 Bootstrap3 进行重建。我认为这是一个很棒的小网站，可以用来测试我最近读到的新事物。我想尝试和实现的其中一件事（在阅读了很多内容之后）是 AngularJS。

据我所知，AngularJS 并不是要直接改变 DOM，而是使用指令和 2 路绑定来做到这一点。

我有很多代码，以及我使用的使用 jQuery 和 jQuery UI 的插件（例如对话框、进度条等等......我还没有弄清楚如何使用 AngularJS 做的事情））。看来，如果我使用 jQueryUI 进度条并从 AngularJS 更新它，我在这里违反了一些规则，而且它可能很脏，而不是应该写的方式。

所以我的问题是，在使用 AngularJS 并构建丰富的 UI 时，正确的工作方式是什么？ jQuery 和 jQueryUI 是否仍然相关？如果是这样，是否有正确的方法来使用它们（也许是 DI？）？

我搜索并找到了一个叫做 AngularJS UI 的东西——但它没有 jQueryUI 丰富。

谢谢

【问题讨论】：

不厚颜无耻地把自己的链接放在这里，我写了一篇关于学习Angular的非常受欢迎的帖子，我会好好看看它并考虑框架是否适合你：@987654322 @。对于 jQuery，您可能会使用一两个插件，您可以将它们转换为指令，并在 Angular 内部无缝使用。至于您的“Angular 不打算直接更改 DOM” - 这是非常不正确的，因为这是为 HTML 编译构建的框架。
@ToddMotto - 嘿，我附上了我的链接，因为我认为查看网站功能应该是什么样子是相关的（因为我猜 StackOverflow 的好人不是我的目标受众，因为它在希伯来语）。我如何将 jQuery 插件转换为指令？至于改变 DOM——据我了解，Angular 并不意味着直接操作 DOM 作为其 MV* 原则的一部分——为了分离关注点。这不是真的吗？
您不是要在控制器中操作 DOM，而是要使用指令。至于控制器是如何工作的，您向$scope 提供填充DOM 的数据。如果您删除/更改此数据，Angular 将自动更新 DOM。永远不应该有$('.myElement') 风格的选择器/函数——如果你需要的话，只有在指令中。
@ToddMotto - 这就是我的意思（对不起，如果我不是更清楚） - 但我们在同一页上。因此，如果我们以进度条为例 - 我将如何在 Andgular 中实现一个但仍然使用 jquery 而不是 HTML5？谢谢
首先我会决定你需要/使用什么'jQuery插件'。如果他们不需要模型/控制器绑定，那么我就不会费心将它们“转换”为 Angular。有一些关于转换的教程，但我不会链接更多;）

标签： javascript jquery jquery-ui angularjs

【解决方案1】：

在指令中使用插件在概念上相当简单。

<div my-directive></div>

以下是一个非常简约的指令，其中包含足够的代码来初始化插件。返回的函数等价于定义更明确的指令中的link

angular.module('myApp').directive('myDirective',function(/* dependencies*/){
      /* element is a jQuery object when jQuery is included in page before angular.js*/
     return function(scope,element,attrs){
         /* can use attributes or scope to pass options to plugin if needed*/
          element.someJqueryPlugin();
     }
});

这相当于只用 jQuery 编写：

$(function(){
    $('[my-directive]').someJqueryPlugin();
});

【讨论】：

【解决方案2】：

如果你想使用 AngularJS 和 Bootstrap，我建议你看看这些指令：

http://angular-ui.github.io/bootstrap/

加载模块后，您可以这样设置进度条：

    <progressbar max="max" value="dynamic">
            <span style="color:black; white-space:nowrap;">{{dynamic}} / {{max}}</span>
    </progressbar>

如果您只需要 Bootstrap 组件，您甚至不需要包含 JQuery。

【讨论】：

您好，感谢您的回答。我从 Internet 下载的其他 jQuery 插件呢？以及对还不支持进度条标签的旧浏览器的支持呢？谢谢。
此处记录了对旧版浏览器的支持：docs.angularjs.org/guide/ie。基本上不测试IE8下的浏览器。对于没有 angular 指令的插件，您可以为它们编写一个或选择在您的项目中包含 jquery。以下是我在 Angular 常见问题解答中找到的内容：Angular 使用 jQuery 库吗？ 是的，如果在引导应用程序时，Angular 存在于您的应用程序中，那么 Angular 可以使用 jQuery。如果 jQuery 不在您的脚本路径中，Angular 将回退到它自己的 jQuery 子集实现，我们称之为 jQLite。