2

我有一个显示链接列表的 ng-repeat 指令。它工作正常，但我的代码也有一个 javascript 函数，它根据列表的尺寸放置列表。自然，在 Angular 完成数据绑定和修改 DOM 之前，列表的维度是未知的。如果我在数据更改后立即调用该函数，则放置计算会跳枪并将列表放置为空的。我想在 Angular 完成修改 DOM 后触发该函数。我怎样才能做到这一点？

编辑：

刚刚尝试将 ngcloak 作为可能的解决方案，不幸的是它不起作用。阅读ngcloak的文档，我的问题不是列表闪烁，而是像空的一样放置，然后停留在那里。数据绑定完成后，我需要一种方法来调用我的函数。

4

5 回答 5

1

对于因数据更改（不仅是在页面加载后）而在 Angular 完成更新视图后寻找执行函数的方法而偶然发现此问题的任何人：

如果使用$timeouttimeout=0（或省略第二个参数 - 这是默认值），代码将在下一个摘要循环中执行。

$timeout(function(){
    /// your logic here
}, 0);

在问题中描述的情况下，这应该在自定义指令中调用，如@MikeDriver 所述

为什么不探测 angular 的当前相位？

根据另一个 SO 答案，Angular 的作者说不应该使用 $phase ——它是一种内部机制，对未来不安全。 https://stackoverflow.com/a/21611534/1578982 显然$timeout方式也更简单。

于 2015-03-11T18:56:25.513 回答
1

似乎您正在使用类似masonry的库来定位元素，如果是这样，请为此使用angular masonry指令。还有 fork 也消除了 jQuery。
不过不管怎样，看看吧，会有用的。

  • 对于文本数据，会有一个小的延迟，例如：

    timeout = $timeout(function layout() {
  //layout elements 
}, 30);

  • 对于图像，您可以在完全加载图像之前获取尺寸，在这里您可以找到一个好方法。

于 2014-10-28T11:54:15.787 回答
1

除了 ng-repeat 之外，我之前通过创建一个要使用的自定义指令来完成此操作。所以例如

<div ng-repeat="foo in bar" myDirective>

这给你的是，myDirective你可以访问指令的范围并检查 ng-repeat 渲染中的最后一项。例如，这就是我在 ng-repeat 渲染的某些元素上使用 isotope jquery 库所拥有的：

angular
    .module('myModule')
    .directive('myDirective', function ($timeout) {
        return {
            restrict: 'A',
            link: function postLink(scope, element, attrs) {
                if (attrs.ngRepeat && scope.$last) {
                    $timeout(function() {
                        $('#myContainer').isotope({
                           layoutMode: 'fitRows'
                        });
                    });
                }
            }
        };
    });

这与 html 一起使用，例如：

<div id="myContainer" ng-repeat="foo in bar" myDirective>
    <div class="element">{{foo}}</div>
</div>

应该给你你正在寻找的东西。

只需$('#myContainer').isotope({})在 ng-repeat 完成渲染重复时替换为您要执行的内容。

于 2013-10-04T14:50:54.667 回答
0

我认为ngCloak是您正在寻找的。

于 2013-10-04T13:57:23.720 回答
0

当数据发生变化时，使用 $timeout 服务延迟后调用修饰符。如果超时不够可靠，因为您无法正确猜测时间，您可以编写一个递归函数，在 100 毫秒等短暂超时后调用自身，以检查 angular 是否处于摘要或应用阶段。如果它不在摘要或应用阶段，那么您可以调用放置修饰符。

于 2013-10-04T20:28:32.343 回答