Question

我只是angularjs的新手。我在我的应用程序的一个视图中有一个表单，在我的另一个视图中显示。该应用程序只有一个控制器。用户可以在表单中输入应显示在另一个视图中的字段。代码看起来像这样。

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>

你能告诉我为什么在点击提交按钮后第二页的视图上没有更新数组。

Answer 1

需要理解的是，尽管您使用的是同一个控制器...每个视图都会运行该控制器的一个新实例，并且一旦视图发生变化，前一个路径（控制器）的范围就会被破坏。

您需要使用服务在整个应用程序中共享数据

Answer 2

您将1个控制器用于两个单独的页面。问题是 - 当你转到另一个页面时，你的当前控制器将被销毁，并且将创建下一页的控制器。即使您为2个不同的页面使用1个控制器功能，也会发生这种情况。如果在控制器代码中放置debugger，则可以看到它。所以移动到另一个页面时，您无法使用控制器保存状态。

您可以使用工厂。工厂（以及服务和提供商）是有角度的单身人士。所以当你去另一个页面时，他们不会被重新创建。

tl; dr ：创建工厂以在移动到其他页面时保存数据

Answer 3

您的控制器有两个“实例”，每个视图一个。如果你不想在那些可以使用服务/工厂的人之间共享数据。 Angular保证在应用程序的生命周期中只存在一个给定服务的实例，这使其成为共享数据的理想场所。

其他方法是使用rootScope。它看起来更容易，但这种解决方案很容易导致污染的rootScope。通常，最好将代码分开，这样就可以更容易地编写好的单元测试并维护代码。

如何在同一个控制器

3 个答案: