如何將數組從一個視圖傳遞到另一個視圖內的另一個視圖

我只是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的青睞程度很高，因此我將學習如何使用服務或工廠來完成此任務。 –

如何將數組從一個視圖傳遞到另一個視圖內的另一個視圖

回答

相關問題