数据不会在页面上的subQueueForm选项卡初始化上绑定。 **
subQueueForm
** 我观察到HTML代码在第一次初始化时绑定，但是在首次初始化时没有绑定角度服务数据。在这里，我还附上了两个屏幕截图。
first initialization screenshot -------------------------------------------------- -------------------- second initialization
$scope.setSelected = function (selectedRow, selectedQueue) {
$scope.selectedRow = selectedRow;
$scope.selectedQueue = selectedQueue;
$scope.slideder(false);
if ($scope.selectedQueue == "Subqueue") {
$scope.selectedTab = false;
$scope.queueDetails = {};
$scope.queueDetails.parentId = $scope.queueData.Id;
$scope.queueDetails.level = 2;
$scope.loadSubQueueList($scope.queueDetails);
} else {
$scope.selectedTab = true;
}
};
$scope.setSelected(0, $scope.queueTabList[0]);
$scope.loadSubQueueList = function (queueDetails) {
$scope.subQueueListObj = {};
$scope.subQueueListObj.parentId = queueDetails.parentId;
$scope.subQueueListObj.level = queueDetails.level;
captureService.getSubQueueList($scope.subQueueListObj).then(function (data) {
if (data.success == true && v1SharedConfiguration.ConfirmNoErrors(
"default", data, true, "getSubQueueList",
null, $translate, undefined, null, null, true, v1EventBus)) {
$scope.subQueueList = {};
$scope.subQueueList = data.data;
}
}, function (err) {
//error
v1Alerts.popError("I18N_CAPTURE_ERROR_FETCH_SUBQUE", true);
});
}<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular.min.js"></script>
<v1-app-navigation></v1-app-navigation>
<div autoscroll="true" class="translation subQueue capture-table card card-table animated fadeInRight capture-boxShadow"
data-ng-init="start()">
<div class="card-body no-padding grey-body" style="padding-top: 15px">
<div id="sidebar" class="be-left-sidebar sidebar-border capture">
<div class="left-sidebar-wrapper titleBar">
<div class="left-sidebar-spacer">
<div class="left-panel-scroll">
<div class="left-sidebar-content">
<ul class="sidebar-elements" style="margin-top: 58px">
<li class="text-right">
<a href="" title="{{'I18N_CAPTURE_HAMBURGER_CLOSE' | translate}}"
ng-click="slideder(false)"
class="sidedrawer-toggle visible-ios visible-xs-block">
<i class="fa fa-arrow-left"></i>
</span>
</a>
</li>
<!-- <li class="text-center ipad-portrait">
<h4>Document Type/Queue</h4>
</li> -->
<div class="sidebar-border queuePadding">
<ul class="list-unstyled">
<li class="list-unstyled overlay grey glow ripple" style="padding-left: 3px"
ng-repeat="queue in queueTabList" ng-click="setSelected($index,queue)"
ng-class="{selected : queue === selectedQueue}" title={{queue}}>
<div
class="col-xs-9 col-sm-9 col-md-9 no-padding truncate ellipsis-white-space">
<h4>{{queue}}</h4>
<i class="icon mdi mdi-face"></i>
</div>
</li>
</ul>
</div>
<li class="divider-white divider visible-sm-block visible-md-block visible-lg-block">
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="be-content be-content-border" id="be-content">
<div class="row">
<div class="col-sm-1 slider">
<a href="" title="Hamburger open" ng-click="slideder()"
class="sidedrawer-toggle visible-ios visible-xs-block">☰</a>
</div>
<div class="main-content">
<form name="queueForm" class="form-horizontal" role="form" novalidate autocomplete="off"
ng-if="selectedTab">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">{{"I18N_CAPTURE_EDIT_QUEUE" | translate}}</h3>
</div>
<div class="modal-body" id="modal-body">
<div class="row">
<div class="col-sm-1">
<label class="control-label" for="queue"
title="{{'I18N_CAPTURE_QUEUE' | translate}}">{{"I18N_CAPTURE_QUEUE" | translate}}<span
class="required"> *</span></label>
</div>
<div class="col-sm-4" data-ng-class="{ 'has-error' : queueForm.queue.$dirty &&
queueForm.queue.$invalid, 'has-success' : queueForm.queue.$valid }">
<input name="queue" id="queue" ng-minlength="1" maxlength="50"
ng-model="$parent.queue.name" class="form-control" type="text"
placeholder="Queue name" title="Enter queue name"
ng-pattern="/^[a-z\d\-_\s]+$/i" required autofocus />
<span class="errorMessage"
ng-show="queueForm.queue.$dirty && queueForm.queue.$invalid &&
!(queueForm.queue.$error.minlength) && !(queueForm.queue.$error.pattern)">{{"I18N_CAPTURE_ERROR_QUE_REQ" | translate}}</span>
<span class="errorMessage"
ng-show="queueForm.queue.$error.minlength">{{"I18N_CAPTURE_ERROR_CAT_MIN" | translate}}
</span>
<span class="errorMessage" ng-show="queueForm.queue.$error.pattern">
{{"I18N_CAPTURE_ERROR_QUE_VALID" | translate}}</span>
</div>
</div>
</div>
<div class="modal-body" id="modal-body">
<div class="row">
<div class="col-sm-1">
<label class="control-label" for="category"
title="{{'I18N_CAPTURE_CAT_NAME' | translate}}">{{"I18N_CAPTURE_CAT_NAME" | translate}}</label>
</div>
<div class="col-sm-4">
<select name="category" class="form-control" ng-model="queue.category">
<option value="">{{"I18N_CAPTURE_Select_Category"| translate}}</option>
<option ng-repeat="x in categoryList" value="{{x.categoryId}}" ng-selected="queue.category == x.categoryId">
{{x.categoryName}}
</option>
</select>
</div>
</div>
</div>
<div class="modal-footer" style="text-align: left">
<button class="btn btn-primary" type="submit" id="queueEdit"
data-ng-disabled="queueForm.$invalid" ng-click="editQueue()"
title="{{'I18N_SAVE' | translate}}">{{"I18N_SAVE" | translate}}</button>
</div>
</form>
<form id="subQueueForm" name="subQueueForm" class="form-horizontal" role="form" novalidate
autocomplete="off" ng-if="!selectedTab" data-ng-init="loadSubQueueList()">
<div class="card-body left">
<div style="padding-bottom: 60px">
<button id="addSubQueue" class="btn btn-primary pull-left btn-group-sm"
data-ng-click="openModalAddSubQueue(true)" ng-disabled="addButton"
title=" {{'I18N_CAPTURE_ADD_SUBQUEUE' | translate}}">
<span class="glyphicon glyphicon-plus"></span>
{{"I18N_CAPTURE_ADD_SUBQUEUE" | translate}}
</button>
</div>
</div>
<div class="table-responsive subQueue-row noSwipe col-sm-8">
<table class="table table-striped table-hover">
<thead>
<tr ng-show="subQueueList.length > 0">
<th>{{"I18N_CAPTURE_SUB_QUEUE" | translate}}</th>
<th>{{"I18N_WRETRIEVE_ACTIONS" | translate}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in subQueueList">
<td class="cell-detail">
<pre class="my-pre">{{data.queueName}}</pre>
</td>
<td class="cell-detail">
<button title="{{'I18N_WRETRIEVE_EDIT' | translate}}"
data-ng-click="openModalAddSubQueue(false,data)"><i
class="glyphicon glyphicon-edit"></i></button>
<button title="{{'I18N_WRETRIEVE_DELETE' | translate}}"
data-ng-click="confirmDeleteSubQueue(data)"><i
class="glyphicon glyphicon-trash"></i></button>
</td>
</tr>
<tr>
<div class="watermark" ng-show="subQueueList.length ==0">
{{"NO_DATA" | translate}}</div>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</div>
</div>
<div class="overlay viewport-height"></div>
</div>
</div>
<script type="text/ng-template" id="subQueueModal.html">
<form name="subQueueForm" class="form-horizontal" role="form" novalidate autocomplete="off">
<div class="modal-header">
<h3 class="modal-title" ng-if="addMode" id="modal-title">{{"I18N_CAPTURE_ADD_SUB_QUEUE " | translate}} {{oldQueueName}}</h3>
<h3 class="modal-title" ng-if="!addMode" id="modal-title">{{"I18N_CAPTURE_EDIT_SUB_QUEUE " | translate}} {{oldQueueName}}</h3>
</div>
<div class="modal-body" id="modal-body">
<div class="row">
<div class="col-sm-4">
<label class="control-label" for="subQueueName" title="{{'I18N_CAPTURE_SUB_QUEUE_NAME' | translate}}">{{"I18N_CAPTURE_SUB_QUEUE_NAME" | translate}}<span class="required"> *</span></label>
</div>
<div class="col-sm-6" data-ng-class="{ 'has-error' : subQueueForm.subQueueName.$dirty &&
subQueueForm.subQueueName.$invalid, 'has-success' : subQueueForm.subQueueName.$valid }">
<input name="subQueueName" id="subQueueName" ng-minlength="1" maxlength="50"
ng-model="$parent.subQueue.name" class="form-control" type="text" placeholder="{{'I18N_CAPTURE_SUB_QUEUE_NAME' | translate}}"
title="{{'I18N_CAPTURE_SUB_QUEUE_NAME_ENTER' | translate}}" ng-pattern="/^[a-z\d\-_\s]+$/i" required ng-focus="onFirstFocus($event)" autofocus/>
<span class="errorMessage" ng-show="subQueueForm.subQueueName.$dirty && subQueueForm.subQueueName.$invalid &&
!(subQueueForm.subQueueName.$error.minlength) && !(subQueueForm.subQueueName.$error.pattern)">{{"I18N_CAPTURE_ERROR_SUB_QUEUE_NAME_REQ" | translate}}</span>
<span class="errorMessage" ng-show="subQueueForm.subQueueName.$error.minlength"> {{"I18N_CAPTURE_ERROR_QUE_MIN" | translate}} </span>
<span class="errorMessage" ng-show="subQueueForm.subQueueName.$error.pattern"> {{"I18N_CAPTURE_ERROR_SUBQUE_VALID" | translate}}</span>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="submit" id="categorySave" data-ng-disabled="subQueueForm.$invalid" ng-click="saveSubQueue()" title="{{'I18N_SAVE' | translate}}">{{"I18N_SAVE" | translate}}</button>
<button class="btn btn-default" type="button" ng-click="cancelSubQueue()" title="{{'I18N_CANCEL' | translate}}">{{"I18N_CANCEL" | translate}}</button>
</div>
</form>
</script>
<script type="text/ng-template" id="confirmDeleteSubQueue.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">{{"I18N_CAPTURE_DELETE_SUB_QUEUE" | translate}}</h3>
</div>
<div class="modal-body" id="modal-body">
<div class="row">
<div class="form-group col-sm-12">
<div >{{"I18N_CAPTURE_CONFRIM_DELETE_SUBQUE" | translate}}</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id = "deleteBtn" type="submit" ng-click="deleteSubQueue()" title="{{'I18N_WRETRIEVE_DELETE' | translate}}">{{"I18N_WRETRIEVE_DELETE" | translate}}</button>
<button class="btn btn-danger" type="button" ng-click="cancel()" title="{{'I18N_CANCEL' | translate}}">{{"I18N_CANCEL" | translate}}</button>
</div>
</script>