0

私はangularjsの初心者です。アプリケーションの 1 つのビューに、別のビューに表示されるフォームがあります。アプリケーション用のコントローラーは 1 つだけです。ユーザーは、他のビューに表示されるフォームにフィールドを入力できます。コードは次のようになります。

var app2 = angular.module('myApp2', ['ngRoute','ngStorage']);

app2.controller('rtCtrl', function($scope,$localStorage,$rootScope){

				$scope.names = [
                    {name:'Jani',email:'jani@gmail.com'},
                    {name:'Hege',email:'hege@gmail.com'},
                    {name:'Kai',email:'kai@gmail.com'}
                ];
				$rootScope.namesfinal = $scope.names;
				$scope.saveData = function(){
				$scope.names.push({name: $scope.username, email: $scope.emailaddress});
				$localStorage.localData = $scope.names;
				$rootScope.namesfinal = $localStorage.localData;
				console.log($rootScope.namesfinal);
                };

				}
                );

app2.config(['$routeProvider',function($routeProvider) {
             $routeProvider.when('/page2', {
                       templateUrl: 'Home2.html',
					   controller: 'rtCtrl'
                       }).when('/page3', {
                       templateUrl: 'Home3.html',
					   controller: 'rtCtrl'
                               }).otherwise({
                            redirectTo: '/'
                            });
                  }]);
<div ng-app="myApp2" ng-controller="rtCtrl">
<!--a href="#page2">CLick here for page 2</a-->
<button ng-click="traverse()">Page2</button><br>
<a href="#page3">CLick here for page 3</a>
<div ng-view></div>
</div>

//The second page comes here

<div>This is the second page<br>
<!--<button ng-click="locstor()">Click Here</button>-->
<span ng-repeat="x in namesfinal">
Name: <span ng-bind="x.name"></span>      Email: <span ng-bind="x.email"></span><br>
</span>
</div>

//the form page comes here

<div>This is the third page
<form name="form1" novalidate>
    Name: <input type="text" name="username" ng-model="username" required>
        <span ng-show="form1.username.$pristine">Enter email here.</span>
        <span style="color:red;" ng-show="form1.username.$dirty && form1.username.$invalid && form1.username.$error.required">
		User name cannot be left empty.</span><br>
    Email: <input type="email" name="emailaddress" ng-model="emailaddress" required>
	<span style="color:red;" ng-show="form1.emailaddress.$error.email">Email is not valid.</span><br>
<!--    Password: <input type="password" ng-model="userpassword" required><span ng-show="">Password should be at least 8 characters long</span>-->
        <input type="submit" value="Submit" ng-disabled="form1.username.$pristine || form1.emailaddress.$pristine || form1.username.$dirty && form1.username.$invalid || form1.emailaddress.$dirty && form1.emailaddress.$invalid"
		ng-click="saveData()">
</form>
</div>

送信ボタンをクリックした後、2 ページ目のビューで配列が更新されない理由を教えてください。

4

3 に答える 3

2

同じコントローラーを使用しているにもかかわらず、各ビューはそのコントローラーの新しいインスタンスを実行し、ビューが変更されると以前のパス (コントローラー) のスコープが破棄されることを理解する必要があります。

アプリケーション全体でデータを共有するには、サービスを使用する必要があります

于 2016-01-20T18:30:51.233 に答える
0

2 つの別々のページに 1 つのコントローラーを使用します。問題は、別のページに移動すると、現在のコントローラーが破棄され、次のページのコントローラーが作成されることです。これは、2 つの異なるページに対して 1 つのコントローラー関数を使用した場合でも発生します。debuggerコントローラーコードに配置すると表示されます。そのため、別のページに移動するときにコントローラーを使用して状態を保存することはできません。

これには factory を使用できます。ファクトリ (およびサービスとプロバイダー) は、Angular のシングルトンです。そのため、別のページに移動しても再作成されません。

tl;dr : 別のページに移動したときにデータを保存するファクトリを作成します

于 2016-01-20T18:31:12.097 に答える
0

ビューごとに 1 つずつ、コントローラーの 2 つの「インスタンス」があります。それらの間でデータを共有したくない場合は、サービス/ファクトリを使用できます。Angular は、アプリのライフサイクル中に特定のサービスのインスタンスが 1 つだけ存在することを保証するため、データを共有するのに理想的な場所になります。

他のアプローチは、rootScope を使用することです。簡単そうに見えますが、この解決策は rootScope の汚染を簡単に引き起こす可能性があります。一般に、コードを分離した方が良いので、優れた単体テストを作成してコードを維持することが容易になります。

于 2016-01-20T18:36:26.980 に答える