我是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。我看不到任何输出......但是当我从上面的代码中删除注释时..它只显示控制器中的硬编码值我错过了什么?
目前,您的所有服务都是将空白对象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>