2015-08-14 52 views
1

我有以下標記傳播視圖的髒狀態向含有形式

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

和在我的控制器的選擇查看方法的主要形式是以下:

$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當我的窗體變髒時。如果你能幫我弄清楚這一點,那麼它對我來說很有用,我想。從角文檔

+1

沒有直接關係的回答您的Q,但你可能會考慮包括控制檯填充工具,而不是感到被迫永遠做'window.console &&的console.log('的https:// github.com/paulmillr/console-polyfill – wesww

回答

1

報價上的形式的指令:

在角,形式可以嵌套。這意味着,當所有子表單都有效時,外部表單也是有效的。但是,瀏覽器不允許嵌套元素,所以Angular提供的ngForm指令的行爲與嵌套的行爲相同,但可以嵌套。這允許您嵌套表單,這在使用ngRepeat指令動態生成的表單中使用Angular驗證指令時非常有用。由於不能使用插值動態生成輸入元素的name屬性,因此必須將每組重複輸入都包裝在ngForm指令中,並將它們嵌套在外部表單元素中。

也許這也適用於在$dirty狀態,這樣,如果一個子窗體$dirty父窗體也將$dirty。我不確定你的情況,你可以嵌套表格。我沒有足夠的背景來想象你想要達到的目標。

或者,您可以手動將主窗體設置爲當其他窗體中的某個變髒時變髒。因爲您從主表單添加了代碼,所以我可以看到您沒有使用角度內置的髒檢查器。也許你有一個很好的理由,但也許你不知道它的存在。您必須使用角度形式指令。 FormController有以下方法:$setDirty();

FormController documentation

Form Directive documentation

+0

我的「主要」形式被定義爲只是形式,而不是ng形式。可以切換到ng形式可以幫助嗎?我可以嘗試。我將主要形式標記添加到問題主體 – Naomi

+0

主窗體包含選項卡,我定義了一個範圍屬性tabViews,當我選擇一個選項卡時,我將進入該特定視圖並顯示適當的窗體,我已經必須使用無效的s tate保存並正確顯示,現在我必須找到一種方法來讓我的主窗體狀態在當前視圖很髒時變髒 – Naomi

+0

如果使用form指令,您可以使用'$ setDirty()'函數使您的形成骯髒。 (更新的原始答案) –