如何将数组从一个视图传递到另一个视图内的另一个视图
我只是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>
你能告诉我为什么数组没有得到第二页面视图点击提交按钮后更新。
需要了解的是,尽管您使用的是相同的控制器,但每个视图都将运行该控制器的新实例,并且视图更改后,前一路径(控制器)中的范围将被销毁。
你需要使用一个服务跨应用
共享数据,可以使用两个单独的页面1个控制器。问题是 - 当你去到另一个页面时,你当前的控制器将被销毁,并且下一页的控制器将被创建。即使您为2个不同的页面使用1个控制器功能,也会发生这种情况。如果您将debugger
放置在您的控制器代码中,您可以看到它。所以当移动到另一个页面时,您不能使用控制器保存状态。
您可以使用此工厂为。工厂(以及服务和提供者)都是单身人士。所以当你转到另一个页面时他们不会被重新创建。
TL;博士:创建一个工厂来保存数据时,你有你的控制器,每一个观点的两个“实例”移动到另一页
如果您可以为我编写代码,这将非常有帮助。由于我对angularjs的青睐程度很高,因此我将学习如何使用服务或工厂来完成此任务。 –
。如果你不想在那些可以使用服务/工厂的人之间共享数据。 Angular保证在应用程序的生命周期中只有一个实例存在给定的服务,这使它成为共享数据的理想场所。
其他方法是使用rootScope。看起来更容易,但这种解决方案很容易导致被污染的rootScope。一般来说,最好分离你的代码,这样编写好的单元测试和维护代码会更容易。
如果您可以为我编写代码,这将非常有帮助。由于我对angularjs的青睐程度很高,因此我将学习如何使用服务或工厂来完成此任务。 –
如果您可以为我编写代码,这将非常有帮助。由于我对angularjs的青睐程度很高,因此我将学习如何使用服务或工厂来完成此任务。 –