Angularjs UI 模态表单 [英] Angularjs UI Modal Forms

问题描述

我曾经有一个使用引导模式的登录对话框:

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

登录表单如下所示:

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

在 angular ui 0.4 和 angularjs 1.1.3 中，这运行良好.

In angular ui 0.4 and angularjs 1.1.3 this worked fine.

我已更新到最新的 angular ui 0.6 和 1.2rc2，现在这不再有效.特别是 $scope.user 不再与表单中的相同.如何获取表单元素的 $scope ?我在 batarang 中看到它，但在 loginDialog 控制器中没有看到.

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.

谢谢

推荐答案

您的开放模型对象缺少 resolve 属性.这是将局部变量传递给模态控制器的新方法.

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.

来自 ui-bootstrap 文档:

From the ui-bootstrap documentation:

resolve - 将被解析并传递给控制器​​的成员作为当地人；它相当于 AngularJS 的 resolve 属性路线

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

更新代码并运行 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;
                }
            }
        });
    };
};

这篇关于Angularjs UI 模态表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！