Question

我正在尝试通过AngularJS指令实现JQueryUI progressbars，但我遇到了轻微的烦恼，我觉得我可能只是在理解可用的多种配置选项时失败了指令。基本上，我希望能够做到这样的事情：

<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，您只需返回undefined。解决这个问题的愚蠢方法是简单地设置超时以继续尝试直到找到元素（通常在一秒钟内需要一些时间）。我只是想知道，如果有一种方法可以通过指令本身执行此操作，那么只有在模板内容正确放入页面后，它才会尝试执行该JavaScript代码。

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

AngularJS指令，用JavaScript操作模板

0 个答案: