Question

我正在努力工作几个小时，但根本没有运气。我有一个angularjs应用程序，我想向用户提供一个加载微调器，只要页面没有完全加载（渲染）。特别是在状态更改之间，因为点击已注册，但没有任何事情立即发生。因此，如果实际正在加载，则用户没有得到反馈。我的应用程序在控制器执行时通过ajax请求一些数据。我已经尝试过不同的解决方案：

使用$stateChangeStart和$viewContentLoaded。如果第一次加载视图，这种方法可以正常工作，但是对于每个后续状态更改都会过早触发。这与模板的缓存有关。每次触发viewContentLoaded时，模板都会被缓存。
使用$timeout指令。如果我将它附加到我的html文档的body，这在第一次加载时效果很好。但由于我使用嵌套视图/控制器，当我在状态之间切换时，不会再次调用该指令。当我将指令附加到ui-view元素时，它再次被解雇。

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

由于

Answer 1

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

您可以使用resolve为控制器提供自定义状态的内容或数据。 resolve是一个可选的依赖关系图，应该注入控制器。

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

使用resolve可以在初始化控制器之前获取数据。这样，当您的控制器执行并且$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来设置和移除你的微调器）时，事情会比现在好很多。

Answer 2

在您的webapp中创建一个div，您希望在其中显示微调器。

使用ng-show =＆＃34; loading＆＃34;

在你的请求之前设置$ scope.loading = true;然后创建一个AngularJS promise（使用.then（）或.finally（））并在此.finally（）中放置$ scope.loading = false;

这样它会在你的微调器加载时显示它，当它最终完成时它将它设置为假，这样就不会显示它。

Answer 3

查看angular-block-ui，这是一个负责显示 loading 指标的模块。可以在整个页面或单个元素上进行阻止。在幕后它监视http请求并确定块是否应该是活动的（它忽略缓存的http请求）。

Answer 4

给某人

<div style="visibility: hidden;">
    {{MyVarAfterLoad = true}}
</div>

完成渲染时的AngularJs

4 个答案: