代码之家  ›  专栏  ›  技术社区  ›  Al Ex Tsm

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

  •  2
  • Al Ex Tsm  · 技术社区  · 10 年前

    我在模态窗口(angular 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 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()”->按下回车键时模式关闭,但提交未通过。

    我需要提交和关闭以在按下回车键时触发,或者如何解决导致提交仅在第一次工作的任何问题,而不是在搜索更改之间关闭并重新打开窗口。

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

    app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
      $routeProvider.
    when("/list/:class", {controller: "listController", templateUrl: "DatabaseObject", reloadOnSearch: true}).
    
    2 回复  |  直到 10 年前
        1
  •  0
  •   codemonkey    10 年前

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

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

    我还将移动函数以关闭模态到模态控制器。这就是为什么模态与 close dismiss 功能。

    另一方面,在enter上使用“cancel”在语义上似乎很奇怪。

        2
  •  0
  •   Al Ex Tsm    10 年前

    解决方案是在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>