DOM in jQuery UI and AngularJS UI Router

Question

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

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

jQuery UI主题示例

对不起我的英语。

Answer 1

正如MonkeyVoodoo所指出的，有一个使用Angular的Twitter Bootstrap的项目。它维护得很好，工作已经为你完成了。

如果必须使用jQueryUI，则必须自己创建指令并维护它们。每一个都没有那么难，但在jQueryUI中有很多小部件和很多选项。

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

指令在这里发挥作用，因为它们将在编译新DOM时自动运行。您可以设置指令来查找您想要"jQueryUI-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()；您必须为每个想要使用的东西创建一个，jQueryUI有很多可以使用的东西。

Answer 2

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

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

Answer 3

已经有很多Angular JS指令可以完成jQuery UI的大部分功能。例如angular ui bootstrap：http://angular-ui.github.io/bootstrap/