我是 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中注入(inject)用户服务,就像
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 上不起作用。我看不到任何输出...但是当我从上面的代码中删除注释时..它只在 Controller 中显示硬编码值我缺少什么?
最佳答案
目前,您的服务所做的就是将一个空白对象 return {}
传递给它所注入(inject)的任何 Controller 。您需要一种 getter/setter 方法,以便在 Home
View 中设置数据,并在 About
View 中检索数据。
所以你的服务可能看起来像这样:
myApp.factory("user", function () {
var dataObj = {};
return {
setData: function(data) {
dataObj.username = data.username;
},
getData: function() {
return dataObj;
}
};
});
现在您可以在 Home
Controller 中设置数据:
myApp.controller("HomeController", function ($scope, user) {
$scope.submitData = function(data) { //pass in ng-model
user.setData(data); //call 'user' service to set data
}
});
并从您的About
Controller 调用它:
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>
关于javascript - 将数据从 Angular 形式传递到另一个 Controller ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35628027/