View распространяющихся на содержащую форму

Question

У меня есть основная форма с помощью следующей разметки

<tabset vertical="true" type="pills"> 
 
            <tab ng-repeat="tab in tabsViews" select="selectView(tab.name, tab.index)" 
 
             ng-show="tab.isVisible" 
 
             class=" {{tabsViews[tab.index-1]['invalid'] ? 'invalid-tab': 'valid-tab' }}"> 
 
             <tab-heading>{{tab.title}}</tab-heading> 
 
            </tab> 
 
           </tabset>

и метода SelectView в моем контроллере выглядит следующим образом:

$scope.previousIndex = null; 
 

 
      $scope.selectView = function (viewName, viewIndex) { 
 
       $scope.selections.showInvoicesDetailView = false; 
 
       $scope.selections.showInvoicesView = false; 
 
       $scope.selections.showPassesView = false; 
 
       if (viewIndex) { 
 

 
        if ($scope.previousIndex != null && $scope.form) { 
 
         $scope.tabsViews[$scope.previousIndex - 1]["invalid"] = $scope.form.$invalid; 
 
        } 
 

 
        $scope.previousIndex = viewIndex; 
 
       } 
 

 
       if (viewName.substring(0, 9) != 'invoices.') 
 
        $scope.selections.lastSelectedView = viewName; 
 
       else 
 
        $scope.selections.showInvoicesDetailView = true; 
 

 
       if (viewName == 'guestPasses') 
 
        $scope.selections.showPassesView = true; 
 

 
       if (viewName == 'invoices') 
 
        $scope.selections.showInvoicesView = true; 
 

 
       if ($scope.selections.isNew) { 
 
        window.console && console.log('SelectView called with the new.' + viewName + ' view...'); 
 
        $state.go('new.' + viewName); 
 
       } 
 
       else { 
 
        window.console && console.log('SelectView called with the edit.' + viewName + ' view...'); 
 
        $state.go('edit.' + viewName); 
 
       } 
 
      };

Основная форма имеет директиву для обнаружения ее грязного состояния и просит сохранить изменения. Проблема в том, что когда я изменяю что-либо в своем текущем представлении, грязное состояние этой формы не распространяется на эту основную форму. Есть ли способ установить основное загрязненное состояние на основе определенного состояния (определенного как представление) грязного состояния?

Чтобы понять проблему лучше, вот основная форма разметка (тот, который имеет вкладки):

div ng-class="{'col-md-7': $parent.showSearch, 'col-md-11': !$parent.showSearch}"> 
 
    @Html.Partial("_EditFormHeader") 
 
    <div class="fourpanel"> 
 
     <div data-sm:collapse="$parent.showForm" id="hideFrm" class="pull-left col-sm-3 sm-search-list"> 
 
      <form name="guestMainForm" novalidate role="form" data-sm:dirty-check data-server:error 
 
        ng-show="$parent.showForm && !selections.justDeleted" class="ng-cloak"> 
 
       <div id="guestEditForm" class="widget" data-resize:container> 
 
        <div class="widget-head"> 
 
         <div class="row"> 
 
          <div class="clearfix"></div> 
 
          @Labels.guest: {{currentGuest.contactPerson.firstName + ' ' + currentGuest.contactPerson.lastName}} {{ !isNew ? '(' + currentGuest.guestNo + ')' : '' }} 
 
          <div class="pull-right text-right col-lg-1" style="padding-right:5px"> 
 
           <i class="fa fa-angle-double-left sm-slider-button" ng-click="toggleFormVisibility()" 
 
            alt="@String.Format(Labels.hideX, Labels.account)" id="angle-left"></i> 
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div class="widget-content"> 
 
         <div class="scrollable widget-resize"> 
 
          <div class="padd"> 
 
           @Html.Partial("_EditFormAlerts") 
 
          </div> 
 
          <div class="col-lg-2 col-md-2 panel-container"> 
 
           <tabset vertical="true" type="pills"> 
 
            <tab ng-repeat="tab in tabsViews" select="selectView(tab.name, tab.index)" 
 
             ng-show="tab.isVisible" 
 
             class=" {{tabsViews[tab.index-1]['invalid'] ? 'invalid-tab': 'valid-tab' }}"> 
 
             <tab-heading>{{tab.title}}</tab-heading> 
 
            </tab> 
 
           </tabset> 
 
          </div> 
 

 
          <div class="col-lg-8 col-md-4 panel-container"> 
 
           <div data-ui-view data-autoscroll="false"></div> 
 
           <div data-ui-view="guestPasses" ng-show="selections.showPassesView"></div> 
 
           <div data-ui-view="invoices" data-autoscroll="false" ng-show="selections.showInvoicesView"></div> 
 
          </div> 
 
         </div> 
 
        </div> 
 

 
        <div class="widget-foot"> 
 
         <div ng-show="!isNew"> 
 
          <button class="btn btn-primary" ng-click="save(currentGuest)" 
 
            ng-disabled="form.$invalid || disableAction"> 
 
           @Labels.save 
 
          </button> 
 
          <data-delete:button title="{{ '@Labels.delete: ' + currentGuest.contactPerson.firstName.trim() + ' ' + currentGuest.contactPerson.lastName.trim() + ' (' + currentGuest.guestNo +')' }}" 
 
               message="@String.Format(Messages.confirmDelete, Labels.guest)" 
 
               disable-action="disableAction" 
 
               delete="delete()"> 
 
          </data-delete:button> 
 
          <data-cancel:button title="@Labels.unsavedChanges" 
 
               message="@Messages.unsavedChanges" 
 
               cancel="cancel()" 
 
               disable-action="disableAction" 
 
               dirty="form.$dirty"> 
 
          </data-cancel:button> 
 
         </div> 
 
         <div ng-show="isNew"> 
 
          <button id="btnAdd" class="btn btn-primary" ng-click="new(currentGuest)" 
 
            ng-disabled="form.$invalid || disableAction"> 
 
           @Labels.add 
 
           </button> 
 
           <data-cancel:button title="@Labels.unsavedChanges" 
 
                message="@Messages.unsavedChanges" 
 
                cancel="cancel()" 
 
                disable-action="disableAction" 
 
                dirty="form.$dirty"> 
 
           </data-cancel:button> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </form> 
 
     </div> 
 
     <div id="showFrm" class="sm-form-expand-button text-center col-sm-1" 
 
      ng-show="!$parent.showForm" 
 
      ng-click="toggleFormVisibility()"> 
 
      <i class="fa fa-angle-double-right"></i> 
 
      <div class="panel2Label">@Labels.guest: {{ currentGuest.contact.firstName.trim() + ' ' + currentGuest.contact.lastName.trim() }} {{ !isNew ? '(' + currentGuest.guestNo + ')' : '' }}</div> 
 
     </div> 
 

 
     <div class="col-sm-5 panel-container"> 
 
      <div data-ui-view="detail" data-autoscroll="true" ng-show="selections.showInvoicesDetailView"></div> 
 
      <div data-ui-view="passDetail"></div> 
 
     </div> 
 
    </div> 
 
</div>

Я создал новую директиву и добавить его в моем взгляде форму:

function ($modal, $rootScope, $location, $state) { 
 
      return { 
 
       restrict: 'A', 
 
       require: ['^form'], 
 
       //scope: { 
 
       // onOk: '&', 
 
       // onCancel: '&' 
 
       //}, 
 
       link: function (scope, element, attrs, controllers) { 
 

 
        var form = controllers[0]; 
 

 
        window.console && console.log(form); 
 

 
        window.onbeforeunload = function() { 
 
         if ((form && form.$dirty) || element.hasClass('ng-dirty')) { 
 
          //   return resourceFactory.getResource('Messages', 'unsavedChanges'); 
 

 
          if (scope.form) 
 
          { 
 
           scope.form.$setDirty(); 
 
          } 
 
         } 
 
        }; 
 
        
 
       } 
 
      };

Я отлаживаю, и я вижу, что форма правильно установлена ​​в форме моего представления, и я могу получить доступ к родительской форме с помощью формы. $$ parentForm. Однако я не знаю, к какому событию я должен подключиться, чтобы установить форму. $$ parentForm. $ SetDirty, когда моя форма становится грязной. Если вы можете помочь мне разобраться в этом, то это будет работать для меня, я думаю.

Answer 1

Цитата угловыми документации по директиве вида:

В Угловое, формы могут быть вложенными. Это означает, что внешняя форма действительна, когда все дочерние формы также действительны. Однако браузеры не допускают вложенности элементов, поэтому Angular предоставляет директиву ngForm, которая ведет себя одинаково, но может быть вложенной. Это позволяет вам иметь вложенные формы, что очень полезно при использовании угловых директив проверки в формах, которые динамически генерируются с использованием директивы ngRepeat. Поскольку вы не можете динамически генерировать атрибут имени входных элементов с использованием интерполяции, вы должны обернуть каждый набор повторяющихся входов в директиве ngForm и вложить их во внешний элемент формы.

Может быть, это также работает в $dirty состоянии, так что если форма ребенок $dirty родительская форма также будет $dirty. Я не уверен, что в вашем случае вы сможете вложить формы. У меня недостаточно контекста для визуализации того, чего вы хотите достичь.

В качестве альтернативы вы можете вручную установить основную форму на загрязнение, когда одна из этих других форм загрязнится. Поскольку вы добавили код из своей основной формы, я вижу, что вы не используете встроенную грязную проверку из углового. Возможно, у вас есть веская причина для этого, но, возможно, вы не знали об этом. Тогда вам придется использовать директиву угловой формы. FormController имеет следующий метод: $setDirty();.

FormController documentation

Form Directive documentation