Question

我有两个bootstrap模式对话窗口，一个创建另一个。当在子项的文本输入上按下enter时，它也会在父项上触发事件。关注父项的最后一个按钮是创建子项的按钮，这会导致立即重新创建子项。

我发现了一些类似的问题，说明对话框上的ok按钮是type = button，因为它们默认提交。我确保按钮具有按钮类型但问题仍然存在，尽管它在chrome中工作正常。

以下是plunker中发生的事情的示例。这是第一个模态窗口。

<script type="text/ng-template" id="myModalContent.html">
        <div class="modal-body">

        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="shownewwindow()">New Modal</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </script>

这是第二个。

<script type="text/ng-template" id="modal2.html">
        <div class="modal-body">
           <input type=textarea value="test" ng-keypress="keydown($event)" autofocus></input>
        </div>
        <div class="modal-footer">
            <button class="btn btn-default" type="button" ng-click="ok()">ok</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </script>

以下是ok，cancel和keydown的功能。

$scope.ok = function () {
    console.log("ok");
    $uibModalInstance.dismiss({completed: true});
  };

  $scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };

  $scope.keydown = function(event) {
            var enterKeyCode = 13;
            $uibModalInstance.dismiss({completed: true});
  }

任何关于如何防止孩子在进入时被重复创建的想法都将不胜感激，谢谢。

Answer 1

点击它时尝试禁用该按钮。

<button ng-disabled="aScopeVar" ng-click="setAScopeVarToTrue()">My button</button>

在创建子项后，不要忘记将aScopeVar设置为true。

在子模态对话框上按Enter键会在父模式对话框中输入（ie11和edge）

1 个答案: