AngularJS でビューを変更するときにスコープのモデルを維持する 質問する

私は、これを最も効果的に行う方法を見つけるのに少し時間がかかりました。また、ユーザーがページを離れて戻るボタンを押したときに、元のページに戻るための状態を保持したいと考えていました。すべてのデータをルートスコープ。

最終的な結果は、サービスそれぞれコントローラコントローラーには、クリアされていれば気にする必要のない関数と変数だけがあります。

コントローラーのサービスは依存性注入によって注入されます。サービスはシングルトンなので、コントローラーのデータのようにそのデータは破棄されません。

サービスにはモデルがあります。モデルにはデータのみがあり、関数はありません。こうすることで、JSON との間で変換して永続化することができます。永続化には html5 ローカルストレージを使用しました。

最後に、 と を使用してwindow.onbeforeunload、$rootScope.$broadcast('saveState');すべてのサービスに状態を保存する必要があることを通知し、$rootScope.$broadcast('restoreState')状態を復元するように通知しました (それぞれ、ユーザーがページを離れる場合と、戻るボタンを押してページに戻る場合に使用)。

例として挙げられるサービスユーザーサービス私のユーザーコントローラー:

app.factory('userService', ['$rootScope', function ($rootScope) {

    var service = {

        model: {
            name: '',
            email: ''
        },

        SaveState: function () {
            sessionStorage.userService = angular.toJson(service.model);
        },

        RestoreState: function () {
            service.model = angular.fromJson(sessionStorage.userService);
        }
    }

    $rootScope.$on("savestate", service.SaveState);
    $rootScope.$on("restorestate", service.RestoreState);

    return service;
}]);

function userCtrl($scope, userService) {
    $scope.user = userService;
}

<h1>{{user.model.name}}</h1>

$rootScope.$on("$routeChangeStart", function (event, next, current) {
    if (sessionStorage.restorestate == "true") {
        $rootScope.$broadcast('restorestate'); //let everything know we need to restore state
        sessionStorage.restorestate = false;
    }
});

//let everthing know that we need to save state now.
window.onbeforeunload = function (event) {
    $rootScope.$broadcast('savestate');
};