web-dev-qa-db-ja.com

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

フォームが複数のページにまたがっている状況があります（理想的ではないかもしれませんが、それはそうです）。ユーザーがステップ間を行き来するときに状態を簡単に覚えられるように、フォーム全体に1つのスコープを設定して、その中に記入していきたいと思います。

だから、非常に擬似コードで行う必要があります：

  1. $scope.val = <Some dynamic data>を設定
  2. リンクをクリックして、新しいテンプレートにルーティングされます（おそらく同じコントローラーを使用）。
  3. $scope.valは、最後のページと同じ値のままです。

スコープのデータを何らかの方法で永続化するのが正しい方法ですか、それとも他の方法がありますか？もちろん、データベースに保存することを除いて、ルート間で永続的なスコープを持つコントローラーを作成することもできます。

scoperoutesangularjscontrollers
88
Erik Honn

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

ユーザーに関するデータを保存するとします

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

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";

    });
138
ganaraj

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

i-router を使用していると想定しているため、名前付きビューをネストできます。次に、擬似コードで：

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

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

子コントローラーからWizardControllerスコープを更新するには、$scope.$parent.myProp = 'value'などの構文を使用するか、各スコープ変数のWizardControllerで関数setMyPropを定義する必要があります。それ以外の場合、子コントローラーから直接親スコープ変数を設定しようとすると、子自体に新しいスコープ変数を作成し、親変数をシャドウイングします。

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

9
tksfz

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

  1. $rootScope
  2. 型

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

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"
}

お役に立てれば。

5
DILIP KOSURI