2017-12-07 3 views
2

からの値iは$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

///から値を取得できますかHelpmeしてください得ることができますここではどのように私は使用することができますIsLoading

+0

あなたはあなたのアプリケーションの変更を反映するために** ** $のrootScopeを使用する必要があります。 –

+0

は$ rootScopeを使用しないでください、それはあなた自身のプロバイダ – shaunhusain

+0

を定義するために動作しますが、より良いでしょうuがplzの任意の例を述べ、それに取り組んで –

答えて

2

使用providers(多分、一般的にサービスや工場、.VALUE)というものを定義するには:$rootScopeへのアクセス権を持っているテンプレートは、あなたは条件付きでDOMに要素を追加した、ngIfを使用してロード画面を表示することができますできますeをコントローラに注入する。

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?

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>

+0

....洙あまりたくさんのありがとうが、一般的には、独自の専用サービスを使用する方が効率的です(プロジェクトが成長しすぎるとデバッグ/管理が容易になります)。すべての共有機能を維持する、基本的には工場やサービスにあるすべての機能をそのままにしてDRY [自分自身を繰り返さない] –

+0

ためThnak @shaunhussain – shaunhusain

0

あなたがrun機能でこのロジックを追加しているので、あなたは$rootScopeオブジェクトではなく、このコンテキスト内に存在しない$scopeオブジェクト、上isLoadingプロパティを設定することをお勧めします:あなたに、そして、

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; 
    }); 
}); 

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

でした管理するために混乱している、唯一の放送イベントのためにそれを使用するか、本当にrootscopeで放送されているイベントをリスニング(またはいくつかのケースでは、ダイジェストサイクルを適用するが、時間のほとんどの人が行うこと、彼らがすべきではない、あまりにも) – shaunhusain

+0

@Christianサントはちょうどのオプションを検討するためのいかなる問題のおかげで、長期的にはあなたが$ rootScopeで物事を置くことができます知って良いほうが良いんでしょうウル答えと提案 –