Question

-4

Angularjs UI Modal Forms

rated 0 times [ 2] [ 6] / answers: 1 / hits: 54549 / 11 Years ago, sat, september 21, 2013, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

patienceannel

Add To Favorites

Follow

Total Points: 674

Total Questions: 101

Total Answers: 101

Location: Northern Mariana Islands

Member since Fri, Jan 15, 2021

3 Years ago

answered 11 Years ago frederickmohamedw · Accepted Answer

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;

                }

            }

        });

    };

};