1

我正在尝试创建一个角度指令，该指令在模板完成渲染时触发 jquery ui 小部件。该模板位于一个单独的 html 文件中，该模板的数据被异步放在不同组件中的 rootscope 上。

问题是对 jquery ui 小部件（在本例中为 jquery ui 选项卡）的调用发生得太快，模板尚未完成渲染。选项卡无法正确呈现。当我在延迟半秒的 $timeout 内调用选项卡小部件时，它工作正常，但这对我来说似乎不是一个可靠的解决方案。

这是代码：

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 小部件？还是我以错误的方式看待问题？

4

0 回答 0