Angularjs、ルート間でスコープを渡す

Question 1

フォームが複数のページにまたがる状況にあります（理想的ではないかもしれませんが、それはそのようです）。フォーム全体に1つのスコープを設定し、ユーザーが手順に沿って前後に移動すると、状態を簡単に覚えられるようにします。

だから私は非常に疑似コードでやる必要があります：

セットする $scope.val = <Some dynamic data>
リンクをクリックすると、新しいテンプレートにルーティングされます（おそらく同じコントローラーを使用します）。
$scope.val 最後のページと同じ値である必要があります。

どういうわけか、スコープのデータを永続化することは、これについて正しい方法ですか、それとも他の方法がありますか？もちろん、データベースに保存する以外は、ルート間でスコープが永続化されているコントローラーを作成することもできます。

Question 2

サービスはアプリの存続期間中存続するため、サービスを使用する必要があります。

ユーザーに関するデータを保存したいとしましょう

これは、サービスを定義する方法です。

app.factory("user",function(){
        return {};
});

最初のコントローラーで：

app.controller( "RegistrationPage1Controller",function($scope,user){
    $scope.user = user;
    // and then set values on the object
    $scope.user.firstname = "John";
    $scope.user.secondname = "Smith";
});

app.controller( "RegistrationSecondPageController",function($scope,user){
        $scope.user = user;
        // and then set values on the object
        $scope.user.address = "1, Mars";

    });

Question 3

サービスは機能しますが、通常のスコープとコントローラーのみを使用してそれを行う論理的な方法は、モデルの構造を反映するようにコントローラーと要素を設定することです。特に、親スコープを確立する親要素とコントローラーが必要です。フォームの個々のページは、親の子であるビューに存在する必要があります。子ビューが更新されても、親スコープは存続します。

名前付きビューをネストできるように、ui-routerを使用していると思います。次に、疑似コードで：

<div ng-controller="WizardController">
  <div name="stepView" ui-view/>
</div>

次に、WizardControllerは、マルチページフォームのステップ全体で保持するスコープ変数を定義します（これを「ウィザード」と呼びます）。その後、ルートstepViewのみが更新されます。各ステップには独自のテンプレート、コントローラー、およびスコープを設定できますが、それらのスコープはページごとに失われます。ただし、WizardControllerのスコープはすべてのページで保持されます。

子コントローラーからWizardControllerスコープを更新するには、各スコープ変数に対してWizardControllerのような構文を使用する$scope.$parent.myProp = 'value'か、関数setMyPropを定義する必要があります。そうしないと、子スコープから直接親スコープ変数を設定しようとすると、子自体に新しいスコープ変数が作成され、親変数が隠されてしまいます。

説明するのが難しいので、完全な例がないことをお詫びします。基本的には、フォームのすべてのページで保持される親スコープを確立する親コントローラーが必要です。

Question 4

2つの方法でコントローラー間でデータを渡すことができます

$rootScope
型番

以下のサンプルは、モデルを使用した値の受け渡しを示しています

app.js

angular.module('testApp')
  .controller('Controller', Controller)
  .controller('ControllerTwo', ControllerTwo)
  .factory('SharedService', SharedService);

SharedService.js

function SharedService($rootScope){

 return{
    objA: "value1",
    objB: "value2"
  }
}

//コントローラAの値を変更します

Controller.js

function Controller($scope, SharedService){

 $scope.SharedService = SharedService;

 $scope.SharedService.objA = "value1 modified";
}

// controllertwoの値にアクセスします

ControllerTwo.js

function ControllerTwo($scope, SharedService){

 $scope.SharedService = SharedService;

 console.log("$scope.SharedService.objA"+$scope.SharedService.objA); // Prints "value1 modified"
}

お役に立てれば。