13

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

  $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 中，这工作得很好。

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

谢谢

4

2 回答 2

27

您缺少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;
                }
            }
        });
    };
};
于 2013-09-21T23:57:01.070 回答
5

继续上面的回复，我分叉了 plunker 并做了一些小的改动：

使用的版本：

  • 角js：1.2.11
  • 角度-ui-bootstrap：0.10.0
  • 引导程序：3.1.0

另一个重要的区别是user对象现在是从 HTML 模板传递的，这可能是当您可能显示项目列表并且您希望通过传递表示单击的列表项的对象来打开模式对话框的情况。

Plunker 位于：http ://plnkr.co/edit/bfpma2?p=preview

于 2014-02-05T06:30:04.390 回答