web-dev-qa-db-ja.com

Angularjs UIモーダルフォーム

以前は、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では、これは正常に機能しました。

最新のangular ui 0.6および1.2rc2に更新しましたが、現在は機能していません。具体的には$scope.userは、フォーム内のものと同じではなくなりました。フォーム要素の$ scopeを取得するにはどうすればよいですか？ batarangには表示されますが、loginDialogコントローラーには表示されません。

ありがとう

javascripttwitter-bootstrapangularjsangular-uiangular-ui-bootstrap
13
Harry

開いているモデルオブジェクトにresolveプロパティがありません。これは、ローカルをモーダルのコントローラーに渡す新しい方法です。

Ui-bootstrapドキュメントから：

resolve-解決され、ローカルとしてコントローラーに渡されるメンバー。これは、AngularJSルートの解決プロパティと同等です

更新されたコードと動作 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;
                }
            }
        });
    };
};
27
mortalapeman

上記の返信に続いて、私はプランカーを分岐させ、いくつかの小さな変更を行いました。

使用されているバージョン：

  • angularjs：1.2.11
  • angle-ui-bootstrap：0.10.0
  • ブートストラップ：3.1.0

もう1つの重要な違いは、userオブジェクトがHTMLテンプレートから渡されることです。これは、アイテムのリストが表示され、モーダルダイアログを開きたい場合に、リスト項目がクリックされた。

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

5
Amarjeet Singh