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

在角UI 0.4和1.1.3 angularjs这工作得很好。

In angular ui 0.4 and angularjs 1.1.3 this worked fine.

我已经更新到最新的UI角0.6 1.2rc2现在这个不再起作用。具体来说 $ scope.user 不再同一个形式。如何获取表单元素的$范围是什么？我看到它在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.

感谢

推荐答案

您缺少你开放模型对象上的解析属性。这是当地人的模式的控制器通过新的途径。

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-引导文件：

决心 - 成员将得到解决，并传递给控制器
  当地人;它相当于决心财产AngularJS的
  路线

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

更新code和工作 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屋！