个人中心
gpt4 book ai didi

javascript - Angular UI Modal - 如果成功触发器在表单标签内，则 ModalInstance 未定义

转载 作者：行者123 更新时间：2023-11-30 00:28:55 26 4
gpt4 key购买 nike

我有一个简单的模式，其中包含一个表单。 “确定”按钮应该处理成功并关闭模态，而取消按钮应该只是关闭模态。如果我将“确定”按钮放在表单标签内，模态实例在处理程序中显示为未定义。我需要将按钮放在表单内有两个原因:设计 Angular 和 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>

您可以通过在关闭调用之前在 modalOk() 函数中放置一个 console.log 来对此进行测试。

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>

关于javascript - Angular UI Modal - 如果成功触发器在表单标签内，则 ModalInstance 未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30318139/

26 4 0
文章推荐： javascript - 我如何访问 Angular 服务中的范围
文章推荐： android - 由 java.lang.NoClassDefFoundError 引起的 native 致命异常
文章推荐： android - 我有多个扩展应用程序类的类
文章推荐： mysql - mysql 子查询错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com