如果成功触发器在表单标签中，则ModalInstance是未定义的

Angular UI Modal - ModalInstance is undefined if success trigger is inside the form tag

本文关键字：ModalInstance 未定义 触发器 成功 表单 标签 如果      更新时间：2023-09-26

我有一个简单的模态，其中包含一个表单。'Ok'按钮应该处理成功并关闭模态，而取消按钮应该只是取消模态。如果我把"Ok"按钮放在表单标签中，模态实例在处理程序中显示为未定义。我需要把按钮内的形式有2个原因:设计角度和ng-submit的工作。有什么问题吗?下面是最基本的代码:

//Modal:
<div class="modal-header">
    <h3 class="modal-title">My modal</h3>
</div>
<div class="modal-body">
    <form name="modalForm" id="modal-form" class="form-horizontal" role="form" ng-submit="modalOk()" novalidate>
        <div class="form-group">
            <label class="col-xs-2 control-label">Sample</label>
            <div class="col-xs-8" ng-class="{'has-error': modalForm.command.$error.required}">
                <input name="command" class="form-control" ng-model="formData.command" maxlength="65" ng-trim="false" required>                
            </div>
            <div class="col-xs-2">
            <!-- Modal undefined --   >             
                <button id="modal-ok" class="btn btn-primary" ng-click="modalOk()" ng-disabled="modalForm.$invalid">Run</button>
            </div>
        </div>
    </form>
</div>
<div class="modal-footer">
<!-- Works here-->
    <button id="modal-ok" class="btn btn-primary" ng-click="modalOk()" ng-disabled="modalForm.$invalid">Run</button>
    <button class="btn btn-primary site-btn-form" ng-click="modalCancel()">Close</button>
</div>
//Controller code
//.....
$scope.myModal = {};
$scope.launchModal = function() {
    //Create a modal for saving the filter
    $scope.myModal = $modal.open({
        templateUrl : 'views/dialogs/myModal.html',
        scope       : $scope,
        backdrop    : 'static'
    });
    //Save
    $scope.modalOk = function() {
        //myModal undefined if called from inside the form
        $scope.myModal.close();
    };
    //Cancel the operation
    $scope.modalCancel = function() {
        $scope.myModal.dismiss();
    };
    //Handle the modal promise
    $scope.myModal.result.then(function() {
        console.log('Ok');
    }, function() {
        console.log('Cancel');
    })['finally'](function(){
        $scope.myModal = undefined;  // Something I tried!
    });
};

任何帮助都是感激的!

您正在获得undefined，因为modelOk()函数正在运行两次，因为它也在ng-submit上调用:

<form name="modalForm" id="modal-form" class="form-horizontal" role="form" ng-submit="modalOk()" novalidate>

您可以通过在关闭调用之前将console.log放入modalOk()函数中来测试这一点。

var app = angular.module('app', ['ui.bootstrap']);
app.controller('myController', function($scope, $modal) {
  $scope.myModal = {};
  $scope.launchModal = function(num) {
    //Create a modal for saving the filter
    $scope.myModal = $modal.open({
      templateUrl: 'm' + num + '.html',
      scope: $scope,
      backdrop: 'static'
    });
    //Save
    $scope.modalOk = function() {
      console.log("modalOk called");
      //myModal undefined if called from inside the form
      $scope.myModal.close();
    };
    //Cancel the operation
    $scope.modalCancel = function() {
      $scope.myModal.dismiss();
    };
    //Handle the modal promise
    $scope.myModal.result.then(function() {
      console.log('Ok');
    }, function() {
      console.log('Cancel');
    })['finally'](function() {
      $scope.myModal = undefined; // Something I tried!
    });
  };
});
<html ng-app='app'>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script>
</head>
<body>
  <div ng-controller='myController'>
    <button ng-click="launchModal(1)">modal1</button>
    <button ng-click="launchModal(2)">modal2</button>
  </div>
</body>
  
<script type="text/ng-template" id="m1.html">
  <div class="modal-header">
    <h3 class="modal-title">My modal</h3>
  </div>
  <div class="modal-body">
    <form name="modalForm" id="modal-form" class="form-horizontal" ng-submit="modalOk()" role="form" novalidate>
      <div class="form-group">
        <label class="col-xs-2 control-label">Sample</label>
        <div class="col-xs-8" ng-class="{'has-error': modalForm.command.$error.required}">
          <input name="command" class="form-control" ng-model="formData.command" maxlength="65" ng-trim="false" required>
        </div>
        <div class="col-xs-2">
          <button id="modal-ok" class="btn btn-primary" ng-click="modalOk()" ng-disabled="modalForm.$invalid">Run</button>
        </div>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary site-btn-form" ng-click="modalCancel()">Close</button>
  </div>
</script>
    
<script type="text/ng-template" id="m2.html">
  <div class="modal-header">
    <h3 class="modal-title">My modal</h3>
  </div>
  <div class="modal-body">
    <form name="modalForm" id="modal-form" class="form-horizontal" role="form" novalidate>
      <div class="form-group">
        <label class="col-xs-2 control-label">Sample</label>
        <div class="col-xs-8" ng-class="{'has-error': modalForm.command.$error.required}">
          <input name="command" class="form-control" ng-model="formData.command" maxlength="65" ng-trim="false" required>
        </div>
        <div class="col-xs-2">
          <button id="modal-ok" class="btn btn-primary" ng-click="modalOk()" ng-disabled="modalForm.$invalid">Run</button>
        </div>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary site-btn-form" ng-click="modalCancel()">Close</button>
  </div>
</script>
</html>

相关文章：