jQuery UI 和 AngularJS UI 路由器中的 DOM答案

【问题标题】：DOM in jQuery UI and AngularJS UI RouterjQuery UI 和 AngularJS UI 路由器中的 DOM
【发布时间】：2014-01-09 08:55:30
【问题描述】：

我有一个关于使用 jQuery UI 和 AngularJS UI Router 的问题。我想在我的应用程序中使用 jQuery UI 主题，但是当我使用 AngularJS UI 路由器时，DOM 树 不完整。

如何将 jQuery UI 元素添加到 AngularJS UI Router 中的模板？

Example of jQuery UI themes

对不起我的英语。

【问题讨论】：

标签： javascript jquery jquery-ui angularjs

【解决方案1】：

正如 MonkeyVoodoo 所指出的，有一个项目可以将 Twitter Bootstrap 与 Angular 结合使用。它维护得很好，并且已经为您完成了工作。

如果您必须使用 jQuery UI，您必须自己创建指令并自己维护它们。每一个都不是那么难，但是在 jQuery UI 中有很多带有很多选项的小部件。

需要指令的原因是当路由改变时如何替换 DOM。它将 DOM 替换为直接从服务器缓存的内容，不是上次查看路由时删除的内容的渲染版本。这意味着每次路由更改时，您都需要运行 jQuery UI 函数来初始化 jQuery UI 小部件。

指令在这里发挥作用，因为它们会在新的 DOM 被编译时自动运行。你可以设置指令来寻找你想要“jQuery UI-ify”的元素。在您的示例中，按钮集具有以下标记：

<div id="radio">
    <input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
    <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
    <input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
</div>

如果您将这些更改为：

<div jq-ui-buttonset>
    <input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
    <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
    <input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
</div>

并创建一个指令来应用 .buttonset() 函数，如下所示：

myApp.directive('jqUiButtonset',function(){
    return {
        restrict: "A",
        link: function(elm){
            $(elm[0]).buttonset();
        }
    }
});

这将起作用并且是非常基本的示例。您必须对其进行扩展以允许将特定配置传递给 .buttonset() 调用。如您所见，这只适用于.buttonset()；你必须为你想要使用的每一个东西创建一个，而 jQuery UI 有很多你可以使用的东西。

【讨论】：

【解决方案2】：

这是我的代码。它适用于我的项目。

.directive('jqUiButtonset',function() {
   return function(scope, element, attrs) {
      $(element).buttonset();
   }
})

【讨论】：

【解决方案3】：

已经有很多 Angular JS 指令可以完成大部分你可以用 jQuery UI 完成的事情。例如角度 ui 引导程序：http://angular-ui.github.io/bootstrap/

【讨论】：

但我需要来自 jQuery UI 的元素。