如何在 Angular Js 中找到完全加载的视图

Question

我想知道 Angular JS 是否有办法识别视图已完全加载。我需要在 route change 上调用一个函数。我用$routeChangeSuccess 试过了。但是该函数在视图完全加载之前被调用。有没有办法做到这一点？

例如，我有一个导航菜单，我需要在根目录更改时激活菜单项。我有一个 css 类 active 用于显示菜单项处于活动状态。我写了一个函数来激活它。如果 url 是 www.myweb.com/#/dashboard，则 dashboard 菜单应该处于活动状态。该功能运行良好。但问题是视图完全加载之前的函数调用。所以它不会激活菜单项，因为菜单项不存在。

如果您有解决方案，请告诉我们。

Answer 1

我真的不知道这是否是一个不错的解决方案。

通常的工作是等待运行一个$digest 循环，该循环将呈现HTML，然后执行DOM 操作调用。这可以通过将设置active 类的调用包装在带有0 延迟的$timeout 调用中来完成，这将导致它在下一个滴答声 上执行。

注意，如果你使用setInterval，那么你需要一个scope.$apply来告诉Angular重新运行$digest循环。

示例

app.directive('myDir', function ($timeout) {
    return {
       template: '<div>Message</div>',
       link: function (scope, elem) {
           $timeout(function () { elem.find('div').addClass('active'); });
       }
    };
});