Question

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

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

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

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

据我所知，AngularJS并不是要直接更改DOM，而是使用指令和双向绑定来实现。

我有很多代码，我使用的插件使用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();
});

Answer 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。

jQuery，jQueryUI（和插件）和AngularJS - 它们如何组合在一起？

2 个答案: