Question

我想为每个状态更改提供一个加载器图像，并且只要状态发生变化，它就会应用于整个页面。我试图至少看看它们是否存在，但不知何故，当状态改变开始并完成时，我收到的$ stateChangeStart都没有定义。我想知道最好的方法是什么？因为我想把$ stateChangeStart作为一个变量用于ng-hide指令，所以当每次状态改变开始时，加载器将显示，并且（我假设）当$ stateChangeSuccess被定义时，它的状态改变是完成？

如果我打算做的任何事情是错误的并且更好的方法，请提供建议。因为我想构建加载器本身是指令并且它是可重用的。

下面是我尝试测试这3个对象的代码。

app.run([          
  '$rootScope','$location','$state','$stateParams',/*'$templateCache',*/
function (

  $rootScope,   $location,  $state,  $stateParams/*,  $templateCache*/  ) {

    console.log("app run")
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
        console.log("state start-------------------------")
        console.log($stateChangeStart,"$stateChangeStart ")
        console.log($stateChangeSuccess,"$stateChangeSuccess ")
        console.log($state);
    });

    $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
        console.log("state $stateChangeSuccess-------------------------")
        console.log($stateChangeStart,"$stateChangeStart ")
        console.log($stateChangeSuccess,"$stateChangeSuccess ")
        console.log($state);
    });
}]);

Answer 1

尝试这样的事情：

app.run([          
  '$rootScope','$location','$state','$stateParams',/*'$templateCache',*/
function (

  $rootScope,   $location,  $state,  $stateParams/*,  $templateCache*/  ) {

    console.log("app run")
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
    $rootScope.showLoading = true;
    });

    $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
    $rootScope.showLoading = false;
    });
}]);

然后将ng-show绑定到showLoading属性。

如何通过$ stateChangeStart，$ stateChangeSuccess，$ state与ui-router for angularjs的组合来检测状态开始完成

1 个答案: