我正在尝试创建一个角度指令,在模板完成渲染时触发jquery ui小部件。模板位于一个单独的html文件中,该模板的数据在不同的组件中异步放在rootcope上。
问题是对jquery ui小部件的调用(在这种情况下为jquery ui tabs)发生得太快,模板还没有完成渲染。选项卡无法正确呈现。当我在$ timeout内调用tabs小部件并延迟半秒时它工作正常,但这对我来说似乎不是一个可靠的解决方案。
以下是代码:
house.directive('floorDirective', function($rootScope, $timeout) {
return {
templateUrl: 'app/partials/floor.html',
link: function(scope, element, attrs)
{
scope.$watch('navigationDto', function(navigationDto) {
scope.toolNodes = [];
if (navigationDto != undefined) {
var treeNodes = navigationDto.TreeNodes;
for (var x = 0; x < treeNodes.length; x++) {
if (treeNodes[x].Id == -100) { //File
scope.menuNodes = treeNodes[x].Children;
}
else {
scope.toolNodes.push(treeNodes[x]);
}
}
}
element.children(':first').tabs({
active: 1
});
});
}
};
});
这是(简化)模板:
<div id="floor">
<ul class="floor-tabs">
<li data-ng-repeat="treeNode in navigationDto.TreeNodes" id="{{treeNode.Id}}">
<a href="#tab{{treeNode.Id}}">{{treeNode.Name}}</a>
</li>
</ul>
<div class="floor-menu">
<div data-ng-repeat="itemNode in menuNodes" id="tab{{itemNode.Id}}">
<a href="#">itemNode.Name</a>
</div>
</div>
<div class="floor-tool" data-ng-repeat="toolNode in toolNodes" id="tab{{toolNode.Id}}">
<div data-ng-repeat="categoryNode in toolNode.Children">
<h2>{{categoryNode.Name}}</h2>
<div data-ng-repeat="itemNode in categoryNode.Children">
<a href="#">itemNode.Name</a>
</div>
</div>
</div>
</div>
有没有办法在模板完成渲染后的恰当时间触发jquery小部件?或者我是以错误的方式看待问题?