[英]Pass data from angular form to another controller
我是angularjs的新手。 我想将数据从html表单传递到另一条路由。
这是index.html的一部分
<div ng-app="myApp" ng-controller="HomeController">
<div class="container">
<div class="row">
<div class="col-md-12">
<div ng-view=""></div>
</div>
</div>
</div>
</div>
这是路线
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'views/home.html',
controller: 'HomeController'
});
$routeProvider.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutController'
});
}]);
当路线为/时,它会到达带有表单的views / home.html
<form action="#/about" ng-submit="submitData()">
<input type="text" name="address" ng-model="user.address" />
<input type="submit" />
</form>
我有一个用户服务,其实现是
myApp.factory("user", function () {
return {};
});
我在HomeController中注入用户服务
myApp.controller("HomeController", function ($scope, user) {
$scope.user = user;
// and then set values on the object
// $scope.user.address = "1, Mars"; // when uncomment this line it can be accessed on AboutController? Why? Otherwise I cannot access user.address
console.log($scope.user);
});
不要在上面的代码中记下我的评论。
并将用户传递给AboutController
myApp.controller("AboutController", function ($scope, user) {
$scope.user = user;
// and then set values on the object
$scope.user.firstname = "John";
$scope.user.secondname = "Smith";
console.log($scope.user);
});
这是about.html
<p>
{{ user.address }}
</p>
问题: {{user.address}}在AboutController上不起作用 。 我看不到任何输出...但是当我从上面的代码中删除注释时。。它仅在控制器中显示硬编码的值,我缺少什么?
这是工作中的演示http://ashoo.com.au/angular/#/
目前,您所做的所有服务就是将空白对象return {}
传递给注入该对象的任何控制器。 您需要一种getter / setter方法,以便在“ Home
视图中可以设置数据,在“ About
视图中可以检索数据。
因此,您的服务可能如下所示:
myApp.factory("user", function () {
var dataObj = {};
return {
setData: function(data) {
dataObj.username = data.username;
},
getData: function() {
return dataObj;
}
};
});
现在,您可以在Home
控制器中设置数据:
myApp.controller("HomeController", function ($scope, user) {
$scope.submitData = function(data) { //pass in ng-model
user.setData(data); //call 'user' service to set data
}
});
并从About
控制器中调用它:
myApp.controller("AboutController", function ($scope, user) {
$scope.user = user.getData(); //Assign
console.log($scope.user.username);
});
而且您的html看起来像:
<form action="#/about" ng-submit="submitData(user.username)">
<input type="text" name="address" ng-model="user.username" />
<input type="submit" />
</form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.