Question

我有一个从ng-repeat生成的列表，它在每次迭代时呈现一个组件标记。而且我使用$index值给每次迭代一个唯一的id。

看起来像这样

<div ng-if="$ctrl.myArr.length > 0" ng-repeat="obj in $ctrl.myArr">
    <myCustomComponentTag id="L1-{{$index}}" obj="obj"></myCustomComponentTag>
</div>

我需要在这些独特的id上运行一些jquery，这些id填充得很好。该视图将成功显示标记，其中包含#L1-0，#L1-1，#L1-2

的ID

障碍是我的jquery运行函数在视图完全加载之前执行，而id值实际上填充了$index

的值

我的jQuery在循环中搜索$(`#L1-${i}`)。如果我将#L1-${i}存储在字符串变量中并输出其值，它将返回'#L1-0'。

但'#L1-0'尚不存在，因为视图尚未完全填充。当我打破我的函数时，元素上的id只读L1-{{$index}}并且还没有填充。

我在几个地方读过尝试this指令。这仍然无效。似乎只是因为我的ng-repeat已经到达了它的最后一个元素，这并不意味着视图已经填充并且我的id已经完全加载到位。

如果视图完全填充了我的数据，我怎样才能执行我的jQuery函数？

修改

这是jQuery函数

jqFn= () => {
    if (this.myArr.length > 0) {
        for (var i: number = 0; i < this.myArr.length; i++) {
            $(`#L1-${i}`).css({
                /*
                Add various styles here
                */
            });
        }
    }
};

Answer 1

也许您可以尝试类似this

的内容

免责声明：我发现这是您在帖子中引用的链接上的评论之一。

Answer 2

我用于此的解决方案是一个递归函数，它设置超时并在repeat语句中搜索最后一个对象的id，直到它出现为止。中的动态数据完全加载后，id才能存在。这保证了我的所有数据都可以访问。

代码与此类似

setListener = (el, cb) => {
    if ($(el).length) {
        cb();
    } else {
        setTimeout(() => {
            this.setListener(el, cb);
        }, 500);
    }
};

仅在ng-repeat完全呈现显示后才执行功能，而不是当ng-repeat到达最后一个索引时

2 个答案: