ちらつきを防ぐためにモデルが読み込まれるまでAngularJSルートの変更を遅らせる


321

AngularJSが各モデルとそのデータがそれぞれのサービスを使用してフェッチされるまで、新しいルートの表示遅らせる方法(Gmailと同様)があるかどうか疑問に思っています

たとえば、ProjectsControllerすべてのプロジェクトをリストしproject_index.htmlたがあり、これらがこれらのプロジェクトを示すテンプレートだったProject.query()場合、新しいページを表示する前に完全にフェッチされます。

それまでは、古いページが引き続き表示されます(たとえば、別のページを参照していて、このプロジェクトインデックスを表示することを決定した場合)。

回答:


374

$ routeProvider resolveプロパティを使用すると、データが読み込まれるまでルート変更を遅らせることができます。

最初に、resolveこのような属性を持つルートを定義します。

angular.module('phonecat', ['phonecatFilters', 'phonecatServices', 'phonecatDirectives']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html', 
        controller: PhoneListCtrl, 
        resolve: PhoneListCtrl.resolve}).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html', 
        controller: PhoneDetailCtrl, 
        resolve: PhoneDetailCtrl.resolve}).
      otherwise({redirectTo: '/phones'});
}]);

resolveプロパティがルート上で定義されていることに注意してください。

function PhoneListCtrl($scope, phones) {
  $scope.phones = phones;
  $scope.orderProp = 'age';
}

PhoneListCtrl.resolve = {
  phones: function(Phone, $q) {
    // see: https://groups.google.com/forum/?fromgroups=#!topic/angular/DGf7yyD4Oc4
    var deferred = $q.defer();
    Phone.query(function(successData) {
            deferred.resolve(successData); 
    }, function(errorData) {
            deferred.reject(); // you could optionally pass error data here
    });
    return deferred.promise;
  },
  delay: function($q, $defer) {
    var delay = $q.defer();
    $defer(delay.resolve, 1000);
    return delay.promise;
  }
}

コントローラー定義には、コントローラーコンストラクターで使用できる必要があるものを宣言するresolveオブジェクトが含まれていることに注意してください。ここでphonesは、コントローラに注入され、resolveプロパティで定義されています。

resolve.phonesこの関数は約束を返却する責任があります。すべてのプロミスが収集され、すべてのプロミスが解決されるまでルート変更が遅延されます。

動作デモ:http : //mhevery.github.com/angular-phonecat/app/#/phones ソース:https : //github.com/mhevery/angular-phonecat/commit/ba33d3ec2d01b70eb5d3d531619bf90153496831


10
@MiskoHevery-コントローラがモジュール内にあり、関数ではなく文字列として定義されている場合はどうなりますか。どのように解決属性を設定できますか?
aar0n 2012年

53
これはangular.controller()タイプコントローラーの定義でどのように使用されますか?$routeProviderもの、私はあなたがコントローラの文字列名を使用していたと思いました。
Ben Lesh

6
angular.controller()と最新バージョンのAngularJSを使用した例はありますか?
Laurent

22
@blesh、を使用する場合angular.controller()、この関数の結果を変数に割り当て(var MyCtrl = angular.controller(...))、その後さらに操作することができます(MyCtrl.loadData = function(){..})。eggheadのビデオを確認してください。コードはすぐに表示されます。egghead.io
video

17
コントローラーをグローバルに配置せずに、これを行うには良い方法が欲しいのですが。あちこちに地球環境を散らかしたくない。あなたは定数でそれを行うことができますが、解決機能をどこかでなくコントローラの上/中に置くことができれば素晴らしいでしょう。
Erik Honn 2013

51

これは、Angular 1.0.2で機能する最小限の動作例です。

テンプレート:

<script type="text/ng-template" id="/editor-tpl.html">
    Editor Template {{datasets}}
</script>

<div ng-view>

</div>

JavaScript:

function MyCtrl($scope, datasets) {    
    $scope.datasets = datasets;
}

MyCtrl.resolve = {
    datasets : function($q, $http) {
        var deferred = $q.defer();

        $http({method: 'GET', url: '/someUrl'})
            .success(function(data) {
                deferred.resolve(data)
            })
            .error(function(data){
                //actually you'd want deffered.reject(data) here
                //but to show what would happen on success..
                deferred.resolve("error value");
            });

        return deferred.promise;
    }
};

var myApp = angular.module('myApp', [], function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: '/editor-tpl.html',
        controller: MyCtrl,
        resolve: MyCtrl.resolve
    });
});​

http://jsfiddle.net/dTJ9N/3/

合理化されたバージョン:

$ http()はすでにプロミス(別名遅延)を返すので、実際にプロミスを作成する必要はありません。MyCtrlを簡略化できます。解決する:

MyCtrl.resolve = {
    datasets : function($http) {
        return $http({
            method: 'GET', 
            url: 'http://fiddle.jshell.net/'
        });
    }
};

$ HTTPの結果は、()が含まれたデータステータスヘッダおよびコンフィグ我々がMyCtrlの本体を変更する必要があるので、オブジェクトを:

$scope.datasets = datasets.data;

http://jsfiddle.net/dTJ9N/5/


私はこのようなことをしようとしていますが、「データセット」が定義されていないため、挿入に問題があります。何かご意見は?
Rob Bygrave 2013年

MB21ねえ、私はあなたがこの質問で私を助けることができるかもしれないと思う:stackoverflow.com/questions/14271713/...
winduptoy

誰かがこの答えをapp.controller( 'MyCtrl')形式に変換するのを手伝ってくれる? jsfiddle.net/5usya/1が動作しませんでした。
user1071182 2013

エラーが表示されます:Unknown provider: datasetsProvider <- datasets
2013年

:あなたはこれでデータセットを置き換えることによって、あなたの答えを簡単にすることができますfunction($http) { return $http({method: 'GET', url: '/someUrl'}) .then( function(data){ return data;}, function(reason){return 'error value';} ); }
モルテザTourani

32

縮小化に適した依存性注入を使用してangular.controllerメソッドを使用してこれを行う方法を尋ねる人がいるのを目にします。私はこの仕事を始めたばかりなので、戻って助けてくれる義務があると感じました。これが私の解決策です(元の質問とMiskoの答えから採用されました):

angular.module('phonecat', ['phonecatFilters', 'phonecatServices', 'phonecatDirectives']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html', 
        controller: PhoneListCtrl, 
        resolve: { 
            phones: ["Phone", "$q", function(Phone, $q) {
                var deferred = $q.defer();
                Phone.query(function(successData) {
                  deferred.resolve(successData); 
                }, function(errorData) {
                  deferred.reject(); // you could optionally pass error data here
                });
                return deferred.promise;
             ]
            },
            delay: ["$q","$defer", function($q, $defer) {
               var delay = $q.defer();
               $defer(delay.resolve, 1000);
               return delay.promise;
              }
            ]
        },

        }).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html', 
        controller: PhoneDetailCtrl, 
        resolve: PhoneDetailCtrl.resolve}).
      otherwise({redirectTo: '/phones'});
}]);

angular.controller("PhoneListCtrl", [ "$scope", "phones", ($scope, phones) {
  $scope.phones = phones;
  $scope.orderProp = 'age';
}]);

このコードは質問/最も人気のある回答から派生しているため、テストされていませんが、縮小化に適した角度コードを作成する方法をすでに理解している場合は、正しい方向に進むはずです。私のコードが必要としなかった1つの部分は、「電話」のresolve関数への「Phone」の注入であり、「遅延」オブジェクトをまったく使用しませんでした。

私もこのYouTubeビデオをお勧めしますhttp://www.youtube.com/watch?v=P6KITGRQujQ&list=UUKW92i7iQFuNILqQOUOCrFw&index=4&feature=plcpします。

興味があれば、自分のコード(coffeescriptで記述)も貼り付けることにしました。これで、私がどのように機能しているかを確認できます。

参考までに、いくつかのモデルでCRUDを実行するのに役立つ汎用コントローラーを事前に使用します。

appModule.config ['$routeProvider', ($routeProvider) ->
  genericControllers = ["boards","teachers","classrooms","students"]
  for controllerName in genericControllers
    $routeProvider
      .when "/#{controllerName}/",
        action: 'confirmLogin'
        controller: 'GenericController'
        controllerName: controllerName
        templateUrl: "/static/templates/#{controllerName}.html"
        resolve:
          items : ["$q", "$route", "$http", ($q, $route, $http) ->
             deferred = $q.defer()
             controllerName = $route.current.controllerName
             $http(
               method: "GET"
               url: "/api/#{controllerName}/"
             )
             .success (response) ->
               deferred.resolve(response.payload)
             .error (response) ->
               deferred.reject(response.message)

             return deferred.promise
          ]

  $routeProvider
    .otherwise
      redirectTo: '/'
      action: 'checkStatus'
]

appModule.controller "GenericController", ["$scope", "$route", "$http", "$cookies", "items", ($scope, $route, $http, $cookies, items) ->

  $scope.items = items
      #etc ....
    ]

resolveAngularの最近のバージョンでは、あなたの例と私の失敗した試みから正しくコントローラーの関数を参照することが不可能であると推測していますか?ここにあるように、構成で正しく宣言する必要がありますか?
XML

@XMLilley確かにそうだと思います。この例は、私が書いた1.1.2からのものだと思います。コントローラ内に
レゾルブを配置

2
よろしくお願いします。SOでこれを行う例はたくさんありますが(ここの上位2つなど)、それらはすべて2012年から2013年初頭のものです。これはエレガントなアプローチですが、推奨されないようです。現在、最もクリーンな代替手段は、約束の対象である個々のサービスを書くことです。
XML

これは私のために働いてくれてありがとう。未定義の$deferサービスに関するエラーを受け取った他の人は、AngularJSのバージョン1.5.7 $timeoutでは代わりに使用することに注意してください。
racl101

18

このコミットは、バージョン1.1.5以降の一部であり、の$promiseオブジェクトを公開します$resource。このコミットを含むngResourceのバージョンでは、次のようなリソースを解決できます。

$ routeProvider

resolve: {
    data: function(Resource) {
        return Resource.get().$promise;
    }
}

コントローラ

app.controller('ResourceCtrl', ['$scope', 'data', function($scope, data) {

    $scope.data = data;

}]);

どのバージョンにそのコミットが含まれていますか?
XML

最新の不安定版(1.1.5)にはこのコミットが含まれています。 ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js
Maximilian Hoffmann

私はこのあまり冗長でないアプローチが好きです。実際のデータオブジェクトからpromiseを作成して直接渡すと便利ですが、これは非常に小さなコードなので、うまく機能します。
Sam Barnum 2013

1
リソースはどのようにして$ routeParamsにアクセスしますか?例:GET '/api/1/apps/:appId'App.get({id: $routeParams.appId}).$promise();
in-

2
@zerononeは$route、解決に注入して使用します$route.current.params。注意してください、$routeParamsまだ古いルートを指しています。
Brice Stacey 14

16

このスニペットは、依存性注入に適しており(私はngminuglifyを組み合わせて使用​​しています)、よりエレガントですドメイン駆動型ですソリューションです。

以下の例では、Phone リソースと、その(phone)ドメインのすべてのルーティング情報を含む定数 phoneRoutesを登録しています。提供された回答で私が気に入らなかったのは、解決ロジックの場所でした- メインモジュールは知らないはずです何も、リソース引数がコントローラーに提供される方法に悩まされる。このようにして、ロジックは同じドメインに留まります。

注:ngminを使用している場合(および使用していない場合は、使用する必要があります)、解決する関数は、DI配列規則で作成するだけです。

angular.module('myApp').factory('Phone',function ($resource) {
  return $resource('/api/phone/:id', {id: '@id'});
}).constant('phoneRoutes', {
    '/phone': {
      templateUrl: 'app/phone/index.tmpl.html',
      controller: 'PhoneIndexController'
    },
    '/phone/create': {
      templateUrl: 'app/phone/edit.tmpl.html',
      controller: 'PhoneEditController',
      resolve: {
        phone: ['$route', 'Phone', function ($route, Phone) {
          return new Phone();
        }]
      }
    },
    '/phone/edit/:id': {
      templateUrl: 'app/phone/edit.tmpl.html',
      controller: 'PhoneEditController',
      resolve: {
        form: ['$route', 'Phone', function ($route, Phone) {
          return Phone.get({ id: $route.current.params.id }).$promise;
        }]
      }
    }
  });

次の部分は、モジュールが構成状態にあるときにルーティングデータを挿入し、それを$ routeProviderに適用することです

angular.module('myApp').config(function ($routeProvider, 
                                         phoneRoutes, 
                                         /* ... otherRoutes ... */) {

  $routeProvider.when('/', { templateUrl: 'app/main/index.tmpl.html' });

  // Loop through all paths provided by the injected route data.

  angular.forEach(phoneRoutes, function(routeData, path) {
    $routeProvider.when(path, routeData);
  });

  $routeProvider.otherwise({ redirectTo: '/' });

});

この設定でルート構成をテストすることも非常に簡単です。

describe('phoneRoutes', function() {

  it('should match route configuration', function() {

    module('myApp');

    // Mock the Phone resource
    function PhoneMock() {}
    PhoneMock.get = function() { return {}; };

    module(function($provide) {
      $provide.value('Phone', FormMock);
    });

    inject(function($route, $location, $rootScope, phoneRoutes) {
      angular.forEach(phoneRoutes, function (routeData, path) {

        $location.path(path);
        $rootScope.$digest();

        expect($route.current.templateUrl).toBe(routeData.templateUrl);
        expect($route.current.controller).toBe(routeData.controller);
      });
    });
  });
});

私の最新の(今後の)実験でそれを完全に見ることができます。このメソッドは私には問題なく機能しますが、promiseオブジェクトである何かのインジェクションを検出したときに、$ injectorが何かの構築を遅延させないのはなぜだろうと本当に思います。それは物事がとてもooOOOOOooOOOOOをはるかに簡単にします。

編集:Angular v1.2(rc2)を使用


2
この優れた答えは、「角度」の哲学(カプセル化など)とはるかに一致しているようです。ロジックは、kudzuのようにコードベース全体に忍び寄るのを防ぐために、意識的に努力する必要があります。
ザクダンス2013年

I really wonder why the $injector isn't delaying construction of anything when it detects injection of anything that is a promise objectアプリの応答性に悪影響を及ぼすデザインパターンを助長する可能性があるため、この機能を省略したと思います。彼らの頭の中の理想的なアプリは、完全に非同期なアプリなので、解決はエッジケースになるはずです。
ザクダンス2013年

11

ルートの表示を遅らせると、必ず非同期のもつれにつながります。メインエンティティの読み込みステータスを追跡し、ビューでそれを使用しないでください。たとえば、コントローラーでは、ngResourceで成功コールバックとエラーコールバックの両方を使用できます。

$scope.httpStatus = 0; // in progress
$scope.projects = $resource.query('/projects', function() {
    $scope.httpStatus = 200;
  }, function(response) {
    $scope.httpStatus = response.status;
  });

次に、ビューで何でもできます:

<div ng-show="httpStatus == 0">
    Loading
</div>
<div ng-show="httpStatus == 200">
    Real stuff
    <div ng-repeat="project in projects">
         ...
    </div>
</div>
<div ng-show="httpStatus >= 400">
    Error, not found, etc. Could distinguish 4xx not found from 
    5xx server error even.
</div>

6
おそらく、HTTPステータスをビューに公開することは、CSSクラスとDOM要素がコントローラーに属していることを扱うこと以上に適切ではありません。私はおそらく同じアイデアを使用しますが、isValid()とisLoaded()で抽象的なステータスを離れます。
jpsimons 2012

1
これは確かに懸念事項の最良の分離ではありません。さらに、特定のオブジェクトに依存するネストされたコントローラーがある場合はクラッシュします。
null

これはかなり賢い方法です。ステータスコードをビューに公開する場合は、コントローラー内のスコーププロパティにhttpロジックを貼り付けて、バインドするだけです。また、バックグラウンドで発生する複数のajax呼び出しを行う場合も、とにかくこれを実行する必要があります。
KingOfHypocrites 2015

問題が単に見方を遅らせるという問題であった場合、これは問題ありません。ただし、ビューだけでなく、コントローラーのインスタンス化を遅らせる必要がある場合は、resolveが最もよく使用されます。(例:コントローラが配線される前にディレクティブにJSONを渡すため、JSONがロードされていることを確認する必要がある場合。)ドキュメントから:「ルータはそれらがすべて解決されるか、1つが拒否されるのを待ってからコントローラが拒否されます。インスタンス化されました
Dan

8

私は上記のミスコのコードから作業しましたが、これは私がそれでやったことです。に$defer変更されているため、これはより最新のソリューション$timeoutです。$timeoutただし、置換を行うと、タイムアウト期間(Miskoのコードでは1秒)待機してから、時間内に解決されることを期待してデータを返します。このようにして、できるだけ早く返します。

function PhoneListCtrl($scope, phones) {
  $scope.phones = phones;
  $scope.orderProp = 'age';
}

PhoneListCtrl.resolve = {

  phones: function($q, Phone) {
    var deferred = $q.defer();

    Phone.query(function(phones) {
        deferred.resolve(phones);
    });

    return deferred.promise;
  }
}

7

AngularJS 1.1.5の使用

AngularJS 1.1.5構文を使用して、Justenの回答の「電話」機能を更新します。

元の:

phones: function($q, Phone) {
    var deferred = $q.defer();

    Phone.query(function(phones) {
        deferred.resolve(phones);
    });

    return deferred.promise;
}

更新しました:

phones: function(Phone) {
    return Phone.query().$promise;
}

Angularチームと貢献者に感謝します。:)

これはマクシミリアン・ホフマンの答えでもあります。どうやらそのコミットはそれを1.1.5にしました。


1
私は約何も見つけることができないよう$promiseドキュメントを。v2.0以降では削除されている可能性があります。
ザクダンス2013年

これは1.2でのみ利用可能です
トーマス

5

$ routeProvider resolveプロパティを使用して、データが読み込まれるまでルートの変更を遅らせることができます。

angular.module('app', ['ngRoute']).
  config(['$routeProvider', function($routeProvider, EntitiesCtrlResolve, EntityCtrlResolve) {
    $routeProvider.
      when('/entities', {
        templateUrl: 'entities.html', 
        controller: 'EntitiesCtrl', 
        resolve: EntitiesCtrlResolve
      }).
      when('/entity/:entityId', {
        templateUrl: 'entity.html', 
        controller: 'EntityCtrl', 
        resolve: EntityCtrlResolve
      }).
      otherwise({redirectTo: '/entities'});
}]);

ことに注意してください resolveプロパティがルート上で定義され。

EntitiesCtrlResolveそして、EntityCtrlResolveある定数と同じファイルで定義されたオブジェクトEntitiesCtrlEntityCtrlコントローラ。

// EntitiesCtrl.js

angular.module('app').constant('EntitiesCtrlResolve', {
  Entities: function(EntitiesService) {
    return EntitiesService.getAll();
  }
});

angular.module('app').controller('EntitiesCtrl', function(Entities) {
  $scope.entities = Entities;

  // some code..
});

// EntityCtrl.js

angular.module('app').constant('EntityCtrlResolve', {
  Entity: function($route, EntitiesService) {
    return EntitiesService.getById($route.current.params.projectId);
  }
});

angular.module('app').controller('EntityCtrl', function(Entity) {
  $scope.entity = Entity;

  // some code..
});

3

AngularJSを初めて使用する開発チームがすぐに理解してすぐに作業できるようになるので、darkporterのアイデアが好きです。

2つのdivを使用するこの適応を作成しました。1つはローダーバー用で、もう1つはデータのロード後に表示される実際のコンテンツ用です。エラー処理は別の場所で行われます。

$ scopeに「準備完了」フラグを追加します。

$http({method: 'GET', url: '...'}).
    success(function(data, status, headers, config) {
        $scope.dataForView = data;      
        $scope.ready = true;  // <-- set true after loaded
    })
});

HTMLビュー:

<div ng-show="!ready">

    <!-- Show loading graphic, e.g. Twitter Boostrap progress bar -->
    <div class="progress progress-striped active">
        <div class="bar" style="width: 100%;"></div>
    </div>

</div>

<div ng-show="ready">

    <!-- Real content goes here and will appear after loading -->

</div>

参照:Boostrapプログレスバードキュメント


複数のデータをロードする場合、少しばらばらになります。すべてが読み込まれているかどうかはどうやってわかりますか?
toxaq 2013年

2月にこの回答を追加して以来、状況は変化しており、このページではさらに多くの活動が行われています。Angularには、この問題を解決するためのサポートが、ここで提案されているものよりも優れているようです。乾杯、
reggoodwin 2013年

少し遅れて到着しましたが、複数のデータを扱うことは大きな問題ではありません。リクエストごとに個別の変数(ブール値:isReadyData1、isReadyData2など)を使用し、$ scope.ready = isReadyData1 && isReadyData2 ...;を設定するだけです。私にとってはうまくいきます。
GuillaumeA

1

私は上記の回答が好きで、それらから多くを学びましたが、上記の回答のほとんどに欠けているものがあります。

サーバーからの最初のリクエストでフェッチされたいくつかのデータでURLを解決していたのと同様のシナリオで行き詰まりました。私が直面した問題は、約束がrejectedでした。

私は返すために使用されるカスタムプロバイダ使用していたPromiseことで解決されたresolveのを$routeProviderコンフィグ相の時を。

ここで強調したいのは、 whenこのようなことを行う。

それはURLバーでURLを見て、次にwhen呼び出されたコントローラーとビューでそれぞれのブロックを見て、これまでのところとてもよく参照されています。

次の設定フェーズコードがあるとします。

App.when('/', {
   templateUrl: '/assets/campaigns/index.html',
   controller: 'CampaignListCtr',
   resolve : {
      Auth : function(){
         return AuthServiceProvider.auth('campaign');
      }
   }
})
// Default route
.otherwise({
   redirectTo: '/segments'
});

ブラウザのルートURLで、実行の最初のブロックotherwiseが呼び出され、それ以外の場合は呼び出されます。

アドレスバーのAuthServicePrivider.auth()関数でrootUrlが呼び出されたシナリオを想像してみましょう。

約束が返されると言うことができます拒否状態 何それから?

何もレンダリングされません。

Otherwise ブロックは、configブロックで定義されておらず、angularJs構成フェーズでは不明なURLの場合と同様に実行されません。

この約束が解決されない場合に発生するイベントを処理する必要があります。失敗する$routeChangeErorrと解雇される$rootScopeます。

以下のコードに示すようにキャプチャできます。

$rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
    // Use params in redirection logic.
    // event is the routeChangeEvent
    // current is the current url
    // previous is the previous url
    $location.path($rootScope.rootPath);
});

IMO一般に、アプリケーションの実行ブロックにイベントトラッキングコードを配置することをお勧めします。このコードは、アプリケーションの構成フェーズの直後に実行されます。

App.run(['$routeParams', '$rootScope', '$location', function($routeParams, $rootScope, $location){
   $rootScope.rootPath = "my custom path";
   // Event to listen to all the routeChangeErrors raised
   // by the resolve in config part of application
   $rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
       // I am redirecting to rootPath I have set above.
       $location.path($rootScope.rootPath);
   });
}]);

このようにして、構成フェーズ時にプロミスの失敗を処理できます。


0

画面レイヤーが無効になっている、複雑なマルチレベルのスライディングパネルインターフェイスがありました。次のような状態を実行するクリックイベントを作成する無効な画面レイヤーにディレクティブを作成する

$state.go('account.stream.social.view');

フリック効果を生み出していた。代わりにhistory.back()は問題なく動作しましたが、私の場合は常に履歴に戻るとは限りません。私が見つけたのは、state.goの代わりに無効画面で属性hrefを作成しただけで、魅力のように機能したということです。

<a class="disable-screen" back></a>

ディレクティブ「戻る」

app.directive('back', [ '$rootScope', function($rootScope) {

    return {
        restrict : 'A',
        link : function(scope, element, attrs) {
            element.attr('href', $rootScope.previousState.replace(/\./gi, '/'));
        }
    };

} ]);

app.js以前の状態を保存するだけです

app.run(function($rootScope, $state) {      

    $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams) {         

        $rootScope.previousState = fromState.name;
        $rootScope.currentState = toState.name;


    });
});

-2

可能な解決策の1つは、モデルを使用している要素でng-cloakディレクティブを使用することです。

<div ng-cloak="">
  Value in  myModel is: {{myModel}}
</div>

これは、最も手間がかからないと思います。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.