Angularjs UI Modal Forms

Question

I used to have a login dialog using bootstrap modal:

 $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(...); } } };

Login form looks like this:

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")

In angular ui 0.4 and angularjs 1.1.3 this worked fine.

I've updated to the latest angular ui 0.6 and 1.2rc2 and now this no longer works. Specifically $scope.user is no longer the same as the one in the form. How do I get the $scope of the form element? I see it in the batarang but not from the loginDialog controller.

Thanks

mortalapeman · Accepted Answer · 2013-09-21 23:57:01Z

You are missing the resolve property on your open model object. This is the new way to pass in locals to your modal's controller.

From the ui-bootstrap documentation:

resolve - members that will be resolved and passed to the controller as locals; it is equivalent of the resolve property for AngularJS routes

Updated code and working 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; } } }); }; };

I am using modal window to show progress bar. I am able to achieve it. How can we avoid user interaction on the background window?
Aditya Sethi I believe you are looking for the "backdrop: 'static'" option.
I am using same thing. This doesn't stops user from making actions in background.
Pro tip: if using a login modal, make it stateful for better ergonomy.

Amarjeet Singh · Accepted Answer · 2014-02-05 06:30:04Z

In continuance to the above reply, I forked the plunker and made a few minor changes:

Versions used:

angularjs : 1.2.11
angular-ui-bootstrap : 0.10.0
bootstrap : 3.1.0

Another important difference is that the user object is now passed from the HTML template, which could be a case when you might have a list of items displayed and you would want to open a modal dialog, by passing the object representing the list item clicked.

Plunker is at: http://plnkr.co/edit/bfpma2?p=preview

Collectives™ on Stack Overflow

Angularjs UI Modal Forms

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related