Angular：如何在UI路由器中实现“加载”动画gif？

Question

我在AngularJS配置如下声明：

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

控制器时loadChart.load函数结束chartCtrl才会开始，所以我不能在控制器管理的指标来开启/关闭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