Угловой: Не удается обновить модель при отправке до закрытия модального

Question

У меня есть форма поиска (форма поиска), отображаемая в модальном окне (угловая UI начальной загрузки мод). Поля ввода содержат значения, которые обновляют мою модель 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-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, но для того, чтобы вторая отправка включила (повторно отредактировала поиск), модальное окно должно быть закрыто и снова открыто (щелкнув вне модального окна). окно)

-Если я оставляю ng-enter="cancel()" -> Модальное окно закрывается при нажатии клавиши enter, но отправка не проходит.

Мне нужно отправить и закрыть для запуска по нажатию Enter или каким-то образом решить любую проблему, которая вызывает отправку работать только в первый раз, а затем закрыть и открыть окно между изменениями поиска.

Вся проблема не существовала бы, если бы я не использовал "reloadOnSearch:true" в моем пути маршрута, но это мне нужно для того, чтобы различные поиски отражались в истории браузера. Если бы я удалил этот параметр, проблема исчезла бы, но я бы потерял различные этапы поиска в виде истории браузера:

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

Answer 1

Решение состоит в том, чтобы применить метод закрытия модального окна для 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>

Answer 2

Вам действительно нужно использовать ng-enter? Почему бы не использовать ng-submit в форме?

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

Я также переместил бы функцию, чтобы закрыть модальное значение для модального контроллера. Вот почему модал поставляется с close а также dismiss функции на нем.

С другой стороны, семантически кажется странным использовать "отмена" при вводе.