將視圖的臟狀態傳播到包含窗體

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(); } } }; } }; 

我正在調試，可以看到該表單已正確設置為視圖的表單，並且可以使用form。$$ parentForm屬性訪問父表單。 但是，我不知道當我的表單變臟時應該掛接到哪個事件來設置form。$$ parentForm。$ setDirty。 我想，如果您能幫助我解決這個問題，那么它將對我有用。

Answer 1

引用Angular文檔中的form指令：

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

也許這也適用於$dirty狀態，因此，如果子窗體為$dirty則父窗體也將為$dirty 。 我不確定您是否可以嵌套表格。 我沒有足夠的上下文來可視化您想要實現的目標。

或者，您可以在其他表單之一變臟時手動將主表單設置為骯臟。 因為您是從主窗體中添加代碼的，所以可以看到您沒有使用angular內置的臟檢查器。 也許您對此有充分的理由，但也許您不知道它的存在。 然后，您必須使用角度形式指令。 FormController具有以下方法： $setDirty(); 。

FormController文檔

表單指令文檔