javascript - jQuery、jQueryUI(和插件)和 AngularJS - 它们如何组合在一起？

Question

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

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

我不久前就构建了它，并且使用 jQuery 和 jQuery UI 来完成所有工作(例如打开对话框、调用服务器、更改 DOM、显示进度条...)。

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

据我所知，AngularJS 并不是直接改变 DOM，而是使用指令和 2 路绑定(bind)来实现。

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

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

我搜索并找到了一个名为 AngularJS UI 的东西 - 但它不如 jQueryUI 丰富。

谢谢

Answer 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();
});