Question

我正在尝试创建一个角度指令，在模板完成渲染时触发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小部件？或者我是以错误的方式看待问题？

Angular指令在完成渲染时触发jquery ui小部件

0 个答案: