如何从$stateChanges获得值

Please Helpme How can i get values from $statechangeStart and $stateChaneSuccess

请帮助我如何从$statechangeStart和$stateChaneSuccess获得值

MyApp.js

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

Home.js

///Here How can i use IsLoading

///这里我怎样使用IsLoading呢

2 个解决方案

#1

Use providers (generally a service or factory, maybe a .value) to define things that can be injected into controllers.

使用提供程序(通常是服务或工厂，可能是.value)来定义可以注入到控制器中的东西。

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

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

Best practice for using $rootscope in an Angularjs application?

在Angularjs应用程序中使用$rootscope的最佳实践?

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>

#2

Because you are adding this logic in the run function, you'll want to set the isLoading property on the $rootScope object, not the $scope object, which does not exist in this context:

因为在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;
    });
});

Then, in your template that has access to $rootScope, you can show a loading screen by using ngIf, which conditionally adds elements to the DOM:

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

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

#1