Angular: 无法在模式关闭前提交时更新模型

Question

我在模态 window(angular ui bootstrap 模态中呈现了一个搜索表单（search form）。输入字段包含在提交时更新我的 ng-model 的值。

<script type="text/ng-template" id="mobileSearchPanel">
              <form>
              <h1 style="text-align:center;">Search</h1>
                <div id="mobileSearcher">
                  <div ng-repeat="attobj in columns">
                    <input ng-if="attobj.filterable" type="text" class="form-control input-sm" ng-model="filterBy1[attobj.filterkey || attobj.key]" ng-model-options="{ updateOn: 'submit' }" placeholder="{{ attobj.name }}" ng-enter="cancel()" />
                  </div>
                </div>
                <input class="phoneSearchSubmitBtn" type="submit" value="submit" style="visibility:hidden;" />
              </form>       

</script>

包装 mobileSearchPanel 呈现器的主控制器拥有打开模态实例（表单）和关闭它的另一个函数：

     $scope.showMobileSearchPanel = function (size) {
    //console.log($scope);
    var modalInstxxxance = $modal.open({
      animation: true,
      templateUrl: 'mobileSearchPanel',
      // controller: 'listController',
      size: size,
      backdrop: true,
      scope: $scope
    });


      $scope.cancel = function(){
        modalInstxxxance.close();
      };
   };

为了能够使用 ng-enter 我有以下指令：

    // this allows to use on element that holds this directive the following.... ng-enter="myFunction()
app.directive('ngEnter', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                scope.$apply(function (){
                    scope.$eval(attrs.ngEnter);
                });

                event.preventDefault();
            }
        });
    };
});

问题：

-如果我删除 ng-enter="cancel()" -> ng-model 更新但为了第二次提交触发（重新编辑搜索）模态必须关闭并重新打开（通过在模式外单击 window)

-如果我离开 ng-enter="cancel()" -> 模式会在按下回车键时关闭，但提交不会通过。

我需要提交和关闭以在按下 enter 时触发，或者如何解决导致提交仅在第一次工作的任何问题，而不是必须在搜索更改之间关闭并重新打开 window .

如果我不在我的路由路径中使用 "reloadOnSearch:true"，整个问题就不会存在，但我需要这样做，以便在浏览器历史记录中反映不同的搜索。如果我删除此设置，问题就会消失，但我会失去不同的搜索阶段作为浏览器历史记录：

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $routeProvider.
when("/list/:class", {controller: "listController", templateUrl: "DatabaseObject", reloadOnSearch: true}).

Answer 1

你真的需要使用 ng-enter 吗？为什么不在表单上使用 ng-submit？

<form name="search-form" ng-submit="doSearchThing()">

我还将关闭模态的功能移至模态控制器。这就是为什么模态带有 close 和 dismiss 功能。

附带说明一下，在语义上使用 'cancel' 回车似乎很奇怪。

Answer 2

解决方案是在 ng-change 上应用模态的关闭方法，由于 ng-model-options，直到按下 enter 才检测到：

    <script type="text/ng-template" id="mobileSearchPanel">


              <form name="search-form">
              <h1 style="text-align:center;">Search</h1>
                <div id="mobileSearcher">
                  <div ng-repeat="attobj in columns">
                    <input ng-if="attobj.filterable" type="text" class="form-control input-sm" ng-model="filterBy[attobj.filterkey || attobj.key]" ng-model-options="{ updateOn: 'submit'}" placeholder="{{ attobj.name }}" ng-change="closingModal()" />
                  </div>
                </div>
                <input class="phoneSearchSubmitBtn" type="submit" value="submit"  />
              </form>       


</script>

Angular: 无法在模式关闭前提交时更新模型

Angular: Can't update model on submit before close of modal

javascript

angularjs

angular-ui-bootstrap

bootstrap-modal