我如何从 $stateChanges 获取值

Question

请帮助我如何从 $statechangeStart 和 $stateChaneSuccess

中获取值

MyApp.js

app.run(function ($rootScope) {
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams, options) {
          $scope.IsLoading = true;

    })
    $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams, options) {
           $scope.IsLoading = False;
    })
})

Home.js

///这里如何使用IsLoading

Answer 1

因为您要在 run 函数中添加此逻辑，所以您需要在 $rootScope 对象上设置 isLoading 属性，而不是 $scope 对象，在此上下文中不存在：

app.run(function ($rootScope) {
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams, options) {
        $rootScope.isLoading = true;

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

然后，在可以访问 $rootScope 的模板中，您可以使用 ngIf 显示加载屏幕，它有条件地将元素添加到 DOM:

<div ng-if="isLoading" class="loading-screen">
    Loading...
</div>

Answer 2

使用providers（通常是服务或工厂，可能是.value）来定义可以注入控制器的东西。

https://docs.angularjs.org/guide/providers

https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

angular.module('myapp',[])
  .value('SharedObject', {isLoading:true})
  .run(function($timeout, SharedObject){
    $timeout(function(){SharedObject.isLoading = false}, 2000);
  })
  .controller('MyCtrl', function(SharedObject){
    this.SharedObject = SharedObject;
  })

<!DOCTYPE html>
<html ng-app="myapp">

  <head>
    <script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  </head>

  <body ng-controller="MyCtrl as myctrl">
    {{myctrl.SharedObject}}
  </body>

</html>

我如何从 $stateChanges 获取值

How can i get values from $stateChanges

angularjs

angular-ui-router