3

ウィザードを実装する単純なマルチビュー Angular アプリケーションがあるため、ユーザーが [次へ] ボタンをクリックするたびに、アプリは次のビューに移動し、[戻る] ボタンについても同じです。$routeProviderすべてのビューを同じコントローラーにバインドする構成があります。各ビューは、入力フィールドを持つ巨大なフォームのチャンクを表し、$routeProviderそれらの間のナビゲーションを管理します:

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider.when('/salespoints', {
        templateUrl: 'salespoints',
        controller: 'main'
    })
    .when('/users', {
        templateUrl: 'users',
        controller: 'main'
    })
    .otherwise({
        templateUrl: 'partner',
        controller: 'main'
    });

    $locationProvider.hashPrefix('');
}]);

問題は、ユーザーが「次へ」または「戻る」をクリックするたびにコントローラーが呼び出されるため、$scope前のステップで行われたすべての変更が単純に失われることです。

app.controller('main', ['$scope', function ($scope) {
    console.log('controller invoked'); // appears each time a user presses "Next" or "Back", hence re-instantiation of $scope
}]);

アプリケーションは$rootScope、他のすべての方法が失敗した場合に頼るのに十分小さいですが、アンチパターンとしてそれを避けたいだけです.

$scopeアプリ インスタンスのライフサイクルの最初から行われたすべての変更を最新の状態に保ち、ビューを変更するたびに再インスタンス化せずに維持する最善の方法は何ですか?

4

3 に答える 3

5

サービスを使用してフォーム データを保持し、コントローラーに挿入します。

angular.module('app').factory('formService', function () {
   var data = {};
   return {
      data: data
   };
});

angular.module('app').controller('ctrl', function(formService) {
   this.formData = formService.data;
});
于 2015-07-01T12:46:13.930 に答える
1

Angularコントローラーは、テンプレートに新しいものがあるたびにインスタンス化されます。 ng-controller

Angularサービスはsingletonであるため、最初に必要になったときに 1 回だけインスタンス化されます。

したがって、Angular サービスは、データ、特に複数のコントローラー インスタンス間で共有されるデータを格納するために使用する必要があります (例と同じコントローラー定義であっても)。

于 2015-07-01T12:48:39.203 に答える
1

そのため、@joao-leal のアドバイスに従って、データの永続性を新しいサービスに移動し、$scope経由で更新を購読しまし$scope.$watchた。全体的なソリューションは、非常に単純なコード チャンクになりました。

app.factory('formPersistence', function () {
    var data = {};

    var get = function () {
        return data;
    };

    var set = function (updated) {
        data = updated;
    }

    var reset = function () {
        data = {};
    }

    return {
        get: get,
        set: set,
        reset: reset
    };
});

app.controller('main', ['$scope', 'formPersistence', function ($scope, formPersistence) {
    $scope.data = formPersistence.get();

    $scope.$watch('data', function () {                
        formPersistence.set($scope.data);
    });
}]);
于 2015-07-01T13:24:47.933 に答える