[英]Angularjs UI Modal Forms
我曾经有一个使用bootstrap模式的登录对话框:
$scope.loginDialog = {
backdrop: true,
keyboard: true,
windowClass: "modal loginDialog",
backdropClick: true,
templateUrl: '/tmpl/user/loginForm',
controller: function dialogController($scope, $modalInstance) {
$scope.submit = function () {
$http.post('/api/login', $scope.user).success(...);
}
}
};
登录表单如下所示:
form#loginBox(ng-submit="submit()")
.modal-body.login-box
.formItem
label(for='user[usernameOrEmail]') Name or Email:
input(type='text', name='user[usernameOrEmail]', required="required", value='', ng-model="user.user")
.formItem
label(for='user[password]') Password:
input(name='user[password]', type='password', value='', required="required", ng-model="user.password")
.modal-footer
input.btn.btn-primary( type="submit", value="Login")
在角度ui 0.4和angularjs 1.1.3中,这很好。
我已经更新到最新的角度ui 0.6和1.2rc2,现在这已经不再适用了。 特别是$scope.user
不再与表单中的那个相同。 如何获取表单元素的$ scope? 我在batarang中看到它但不是来自loginDialog控制器。
谢谢
您缺少打开的模型对象上的resolve
属性。 这是将本地传递给模态控制器的新方法。
从ui-bootstrap文档:
resolve - 将被解析并作为本地人传递给控制器的成员; 它等同于AngularJS路由的resolve属性
更新的代码和工作的plunker
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.user = {
user: 'name',
password: null
};
$scope.open = function () {
$modal.open({
templateUrl: 'myModalContent.html',
backdrop: true,
windowClass: 'modal',
controller: function ($scope, $modalInstance, $log, user) {
$scope.user = user;
$scope.submit = function () {
$log.log('Submiting user info.');
$log.log(user);
$modalInstance.dismiss('cancel');
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
user: function () {
return $scope.user;
}
}
});
};
};
继续上述回复,我分叉了一下,并做了一些小改动:
使用的版本:
另一个重要的区别是user
对象现在是从HTML模板传递的,这可能是您可能显示项目列表并且您希望打开模式对话框的情况,方法是传递表示单击列表项的对象。
Plunker位于: http ://plnkr.co/edit/bfpma2?p = preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.