如何将数组从一个视图传递到另一个视图内的另一个视图

我只是angularjs的新手。在我的应用程序的一个视图中有一个表格，这表明了我的观点。应用程序只有一个控制器。用户可以在应该显示在另一个视图上的表格中输入字段。代码看起来像这样。如何将数组从一个视图传递到另一个视图内的另一个视图

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

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

 
\t \t \t \t $scope.names = [ 
 
        {name:'Jani',email:'[email protected]'}, 
 
        {name:'Hege',email:'[email protected]'}, 
 
        {name:'Kai',email:'[email protected]'} 
 
       ]; 
 
\t \t \t \t $rootScope.namesfinal = $scope.names; 
 
\t \t \t \t $scope.saveData = function(){ 
 
\t \t \t \t $scope.names.push({name: $scope.username, email: $scope.emailaddress}); 
 
\t \t \t \t $localStorage.localData = $scope.names; 
 
\t \t \t \t $rootScope.namesfinal = $localStorage.localData; 
 
\t \t \t \t console.log($rootScope.namesfinal); 
 
       }; 
 

 
\t \t \t \t } 
 
       ); 
 

 
app2.config(['$routeProvider',function($routeProvider) { 
 
      $routeProvider.when('/page2', { 
 
         templateUrl: 'Home2.html', 
 
\t \t \t \t \t controller: 'rtCtrl' 
 
         }).when('/page3', { 
 
         templateUrl: 'Home3.html', 
 
\t \t \t \t \t 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"> 
 
\t \t User name cannot be left empty.</span><br> 
 
    Email: <input type="email" name="emailaddress" ng-model="emailaddress" required> 
 
\t <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" 
 
\t \t ng-click="saveData()"> 
 
</form> 
 
</div>

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

来源

2016-01-20 Just Beginner

需要了解的是，尽管您使用的是相同的控制器，但每个视图都将运行该控制器的新实例，并且视图更改后，前一路径（控制器）中的范围将被销毁。

你需要使用一个服务跨应用

来源

2016-01-20 18:30:51 charlietfl

如果您可以为我编写代码，这将非常有帮助。由于我对angularjs的青睐程度很高，因此我将学习如何使用服务或工厂来完成此任务。 –

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

您可以使用此工厂为。工厂（以及服务和提供者）都是单身人士。所以当你转到另一个页面时他们不会被重新创建。

TL;博士：创建一个工厂来保存数据时，你有你的控制器，每一个观点的两个“实例”移动到另一页

来源

2016-01-20 18:31:12 Denis

如果您可以为我编写代码，这将非常有帮助。由于我对angularjs的青睐程度很高，因此我将学习如何使用服务或工厂来完成此任务。 –

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

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

来源

2016-01-20 18:36:26

如果您可以为我编写代码，这将非常有帮助。由于我对angularjs的青睐程度很高，因此我将学习如何使用服务或工厂来完成此任务。 –

如何将数组从一个视图传递到另一个视图内的另一个视图

回答

相关问题