1

我正在尝试通过 AngularJS 指令实现JQueryUI 进度条，但我遇到了一点烦恼，我觉得我可能只是无法理解指令提供的过多配置选项。基本上，我希望能够做这样的事情：

<div ng-repeat="te in timedEvents">
    <progressbar identifier="{{te.identifier}}" begins="{{te.beginTimestamp}}" ends="te.endTimestamp" now="td.nowTimestamp"></progressbar>
</div>

事件异步来自服务器（不确定这是否重要）。然后有一个看起来像这样的指令：

myApp.directive('progressbar', function($compile) {
    return {
        restrict: 'E',
        scope: {
            identifier: '@identifier'
        },
        template: "<div id='{{identifier}}'></div>",
        link: function (scope, element, attrs) {
            var percentComplete = --whatever--; //calculate this, obviously
            $("#" + attrs.identifier).progressbar({
                value: percentComplete;
            });
            //do other stuff to set a proper interval for keeping this updated
        }
    }
})

问题是链接函数中的代码在模板创建的 DOM 元素准备好之前执行，因此如果您尝试通过 JQuery 或其他方式访问所述 DIV，您只会返回未定义。解决这个问题的黑客方法是简单地设置一个超时以继续尝试直到可以找到元素（通常需要不到一秒钟的时间）。不过，我只是想知道，是否有办法通过指令本身来执行此操作，以便它仅在模板内容正确放入页面后尝试执行该 JavaScript 代码。

有人可以回答这个问题吗？

4

0 回答 0