0

我只是 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>

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

4

3 回答 3

2

需要了解，尽管您使用的是相同的控制器......每个视图都将运行该控制器的一个新实例，并且一旦视图更改，来自先前路径（控制器）的范围就会被破坏。

您需要使用服务在应用程序之间共享数据

于 2016-01-20T18:30:51.233 回答
0

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

您可以为此使用工厂。工厂（以及服务和提供者）在角度上是单例的。因此，当您转到另一个页面时，它们不会被重新创建。

tl;dr：创建一个工厂以在您移动到另一个页面时保存您的数据

于 2016-01-20T18:31:12.097 回答
0

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

其他方法是使用 rootScope。它看起来更容易，但这种解决方案很容易导致 rootScope 被污染。一般来说，最好将代码分开，这样编写好的单元测试和维护代码会更容易。

于 2016-01-20T18:36:26.980 回答