javascript - jQuery UI 和 AngularJS UI 路由器中的 DOM

Question

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

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

Example of jQuery UI themes

对不起我的英语。

Answer 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 有很多您可以使用的东西。