Angular: 如何在 ui-router 中实现 "loading" 动画 gif？

Question

我的 AngularJS 配置中有以下声明：

.state('state1', {
     templateUrl: 'some_template.html',
     controller: 'chartCtrl',
     resolve: {
        chart: function(load){
             return loadChart.load();
        }
     }
})

控制器 chartCtrl 只会在 loadChart.load 函数结束时启动，因此我无法在控制器中管理一个指示器来打开 on/off 动画 gif。有任何想法吗？

Answer 1

在您的应用中尝试运行配置文件：

$rootScope.$on('$stateChangeStart', function(){
   loadChart.load();
});

$rootScope.$on('$stateChangeSuccess', function(){
   loadChart.end();
});

控制器启动任何预加载是个坏主意，因为您不能将它重新用于其他控制器并且它需要更可控。

您可以仅为解析器状态定义它，例如：

$rootScope.$on('$stateChangeStart', function(event, toState){
   if(toState.resolve){
     loadChart.load();
   }
});

$rootScope.$on('$stateChangeSuccess', function(){
   loadChart.end();
});

阅读更多关于 State Changes Events

Angular: 如何在 ui-router 中实现 "loading" 动画 gif？

Angular: How can a "loading" animated gif be implemented in ui-router?

angularjs

angular-ui-router