Question

我有一个在模态窗口内呈现的搜索表单（搜索表单）（angular ui bootstrap modal）。输入字段包含在提交时更新我的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（）” - ＆gt; ng模型更新但为了触发第二次提交（重新编辑搜索），必须关闭模式并重新打开（通过在模态窗口外单击）

- 如果我离开ng-enter =“cancel（）” - ＆gt;按下输入时模态关闭，但提交不会通过。

我需要提交和关闭触发按下输入或一些如何解决导致提交仅第一次工作的问题，而不是必须在搜索更改之间关闭并重新打开窗口。

如果我不在路径路径中使用“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函数的原因。

从旁注来看，语义上使用＆＃39;取消＆＃39;在进入。

Answer 2

解决方案是将模态的关闭方法应用于ng-change，直到按下输入时才检测到这种方法，这要归功于ng-model-options：

    <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：在关闭模态之前无法更新提交的模型

2 个答案: