Angular：在模式關閉前無法更新模型

Question

我在模態窗口（角度ui bootstrap模式）中呈現搜索表單（搜索表單）。輸入字段包含提交時更新我的​​ng模型的值。

<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-回車我有以下指令：

// 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更新，但爲了讓第二次提交觸發（重新編輯搜索），必須關閉並重新打開模式（通過在模式窗口外單擊）

- 如果我離開ng-enter =「cancel（）」 - >模式在按下回車鍵時關閉，但提交dosn't不通過。

我需要提交和關閉觸發按下輸入或一些如何解決任何問題導致提交工作只是第一次，而不必關閉並重新打開搜索更改之間的窗口。

如果我不在路由路徑中使用「reloadOnSearch：true」，但我需要爲了讓不同的搜索反映在瀏覽器歷史記錄中，整個問題將不存在。如果我會刪除此設置問題會消失，但我就輸了不同的搜索階段的瀏覽器歷史記錄：

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

Answer 1

的解決方案是應用這是直到進入多虧了NG-模型選項按檢測到NG-變化模式的收盤方法：以我目前的配置納克

<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> 

Answer 2

你真的需要使用NG-進入？爲什麼不在表單上使用ng-submit？

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

我也會移動函數關閉模態到模態控制器。這就是爲什麼模態附帶close和dismiss功能。

在附註上，語義上在輸入時使用'取消'似乎很奇怪。