Eu sou novo no angularjs. Quero passar dados do formulário html para outra rota.
Aqui está a parte de 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>
Aqui estão as rotas
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'
});
}]);
Quando a rota é / atinge o ponto de vista / home.html no qual tem um formulário
<form action="#/about" ng-submit="submitData()">
<input type="text" name="address" ng-model="user.address" />
<input type="submit" />
</form>
Eu tenho um serviço de usuário cuja implementação é
myApp.factory("user", function () {
return {};
});
Eu injeto serviço de usuário no HomeController como
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);
});
Não anote meu comentário no código acima ..
e passa o usuário para AboutController como
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);
});
Aqui está o about.html
<p>
{{ user.address }}
</p>
Problema: {{user.address}} não funciona no AboutController . Não consigo ver nenhuma saída ... Mas quando eu removo o comentário do código acima ... Ele só exibe valores codificados permanentemente no controlador O que estou perdendo?
Esta é a demonstração de trabalho http://ashoo.com.au/angular/#/
No momento, tudo o que seu serviço faz é passar um objeto em branco return {}para qualquer controlador no qual ele seja injetado. Você precisa de uma abordagem getter / setter, de modo que em sua Homevisualização você possa definir os dados e, em sua Aboutvisualização, você possa recuperá-los.
Portanto, seu serviço pode ser semelhante a este:
myApp.factory("user", function () {
var dataObj = {};
return {
setData: function(data) {
dataObj.username = data.username;
},
getData: function() {
return dataObj;
}
};
});
Agora você pode definir os dados em seu Homecontrolador:
myApp.controller("HomeController", function ($scope, user) {
$scope.submitData = function(data) { //pass in ng-model
user.setData(data); //call 'user' service to set data
}
});
E chame de seu Aboutcontrolador:
myApp.controller("AboutController", function ($scope, user) {
$scope.user = user.getData(); //Assign
console.log($scope.user.username);
});
E seu html ficaria assim:
<form action="#/about" ng-submit="submitData(user.username)">
<input type="text" name="address" ng-model="user.username" />
<input type="submit" />
</form>
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras