javascript - AngularJs 完成渲染

Question

我尝试了几个小时，但一点运气都没有。我有一个 angularjs 应用程序，只要页面未完全加载(渲染)，我就想向用户展示加载旋转器。特别是在状态更改之间，因为单击已注册，但没有立即发生任何事情。因此，无论是否实际加载，用户都不会得到任何反馈。当 Controller 执行时，我的应用程序通过 ajax 请求一些数据。我已经尝试过不同的解决方案:

1. 使用$stateChangeStart和$viewContentLoaded。如果第一次加载 View ，这种方法确实可以正常工作，但对于每次后续状态更改来说，触发得太早。这与模板的缓存有关。每次 viewContentLoaded 被触发时，模板都会被缓存。

2. 使用带有 $timeout 的指令。如果我将其附加到 html 文档的 body 中，这在第一次加载时效果非常好。但由于我使用嵌套 View / Controller ，当我在状态之间切换时，不会再次调用该指令。当我将指令附加到 ui-view 元素时，它再次提前触发。

还有其他选择吗？难道我做错了什么？有可能吗？

谢谢

Answer 1

您是否尝试过使用resolve对象？

You can use resolve to provide your controller with content or data that is custom to the state. resolve is an optional map of dependencies which should be injected into the controller.

https://github.com/angular-ui/ui-router/wiki#resolve

使用resolve允许您在 Controller 初始化之前获取数据。这样，当您的 Controller 执行并且 $viewContentLoaded 被触发时，您可以确保您的数据可用:

$stateProvider.state('myState', {
    templateUrl: 'template.html',
    controller: function($scope, myData){
        $scope.myData = myData;
    },
    resolve:{
        myData:  function($http){
            return $http({method: 'GET', url: '/myUrl'})
                .then (function (data) {
                    return doSomeStuffFirst(data);
                }
            );
        }
    }
});

我敢打赌，当使用 resolve 和您的第一个选项(使用 $routeChangeStart 和 $viewContentLoaded 来设置和删除微调器)时，事情会起作用比现在好多了。