Has*_*san 0 forms angularjs angularjs-directive
我是angularjs的新手,我制作了一个示例应用程序,现在我想在使用隔离范围指令提交表单时在下一页上显示数据.我的index.html:
<body ng-controller="mainController">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#home"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
<li><a href="#contact"><i class="fa fa-comment"></i> Contact</a> </li>
</ul>
</div>
</nav>
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ui-view></div>
</div>
</body>
指示:
var scotchApp = angular.module('scotchApp');
scotchApp.directive('homeData', function() {
return {
scope: {
info: '=fo'
},
templateUrl: 'homeDirective.html'
}
scotchApp.controller('MyFormCtrl', [function() {
this.user = {
name: '',
email: ''
};
this.register = function() {
// console.log('User clicked register', this.user);
alert(this.user.name + "-- " + this.user.email);
$scope.name = this.user.name;
};
}]);
})
当有人提交表单时,如何在点击提交按钮和我要在那里显示的所有表单数据后显示有关页面的情况下如何实现这一点.这是我的傻瓜: http ://plnkr.co/edit/D5S2c6rgycWFfsyfhN9J?p=preview
小智 5
因此,根据您放入plunker并查看代码的内容,我注意到了一些问题.
第一:你的指令中有你的控制器,导致指令中没有任何代码被运行.
你的守则
var scotchApp = angular.module('scotchApp');
scotchApp.directive('homeData', function() {
return {
scope:{
info:'=fo'
},
templateUrl: 'homeDirective.html'
}
scotchApp.controller('MyFormCtrl', [function() {
this.user = {
name: '',
email: ''
};
this.register = function() {
// console.log('User clicked register', this.user);
alert(this.user.name+ "-- " +this.user.email);
$scope.name=this.user.name;
};
}]);
})
更新代码:
var scotchApp = angular.module('scotchApp');
scotchApp.directive('homeData', function() {
return {
scope:{
info:'=fo'
},
templateUrl: 'homeDirective.html'
};
});
scotchApp.controller('MyFormCtrl', [function() {
this.user = {
name: '',
email: ''
};
this.register = function() {
// console.log('User clicked register', this.user);
alert(this.user.name+ "-- " +this.user.email);
$scope.name=this.user.name;
};
}]);
第二:你需要添加一些方法,允许变量在控制器之间进行通信.我使用了一项服务并将其传递给两个控制器
scotchApp.controller('MyFormCtrl', ['$scope', 'userService', function($scope, userService) {
$scope.userService = userService;
$scope.user = {
name: '',
email: ''
};
$scope.register = function() {
//sets the variables within the service
$scope.userService.setUserName($scope.user.name);
$scope.userService.setUserEmail($scope.user.email);
alert($scope.userService.getUserName() + "-- " + $scope.userService.getUserEmail());
};
}]);
//Service to be passes to the controllers
scotchApp.service('userService', function(){
var userService = {
user: {
'name': '',
'email': ''
},
getUser: function(){
return userService.user;
},
getUserName: function(){
return userService.user.name;
},
getUserEmail: function(){
return userService.user.email;
},
setUserName: function(name){
userService.user.name = name;
},
setUserEmail: function(email){
userService.user.email = email;
},
};
return userService;
});
scotchApp.controller('aboutController', ['$scope', 'userService', function($scope, userService) {
$scope.userService = userService;
$scope.user = $scope.userService.user;
$scope.message = 'Look! I am an about page.';
}]);
第三:您的HTML页面必须能够调用注册函数并转到about页面.
<div class="jumbotron text-center" >
<h1>Home Page</h1>
<p>{{ message }}</p>
<form name="myForm" ng-controller="MyFormCtrl as ctrl">
Name: <input type="text" class="form-control" ng-model="user.name">
Email: <input type="email" class="form-control" ng-model="user.email">
<br/>
<a type="submit" ng-href="#about">
<button ng-click="register();" type="submit">Register</button>
</a>
</form>
</div>
最后:你应该把你的整个角度应用程序放在一个自我调用函数中
(function(){
var app = angular.module('app'[]);
//more code
})();
这是我为你的代码做的plunk fork的链接.希望这一切都有意义.链接到Plunker
祝好运!
| 归档时间： |
|
| 查看次数： |
5203 次 |
| 最近记录： |