应用程序在sails.js上作为后端运行,Angular作为前端运行, 它是CRUD应用程序,有两个页面,一个是主要的仪表板,另一个是具有高级搜索功能的Search.html。
这里有两页,使用相同的ng-repeat注入相同的html页面,其中包含使用相同服务的相同控制器的相同功能。
在这里怎么回事,我点击了删除按钮,它显示了fireCancelQuoteModal(引用),然后我点击确认并点击ng-click = cancelQoute,它通过decisionFrom而没有任何问题。
现在在cancelQouteModalCtrl中,qoute和decisionForm都没有问题地传递给qouteLogService,其中qoute仍在那里,qoutelog包含cancellationReason。
和qoute.post应该返回createdQouteLog但它不在搜索.html中并且在Dashboard.html中
当我开始跟踪并观察var时,当代码进入Angular.js和后面的堆栈时,一切都消失了
$ scope.apply()/ $ scope.digest()/$scope.eval()/ processQueue()
此处是Dashboard.html和search.html
的表格 <table class="table table-striped table-responsive" ui-jq="footable" data-filter="#filter19"
data-page-size="{{pageControl.pageSize}}">
<thead>
<tr>
<th data-type="date">Last Update</th>
<th>Client</th>
<th>Phone</th>
<th>Dealer</th>
<th>Assigned To</th>
<th data-type="numeric">Status</th>
<th>Progress</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="quote in allQuotes | orderBy: '-updatedAt' track by quote.id"
ng-init="latestQuoteLog=findLatestQuoteLog(quote.quoteLogs)">
<td class="text-center" data-value="{{latestQuoteLog.createdAt}}">
{{latestQuoteLog.createdAt | date : 'dd-MMM-yy hh:mm a'}}
</td>
<td>{{quote.client.name}}</td>
<td>{{quote.client.phone | tel}}</td>
<td ng-if="quote.dealershipCompany">{{quote.dealershipCompany.name}}</td>
<td ng-if="!quote.dealershipCompany">Online</td>
<td>{{username(latestQuoteLog.assignedTo)}}</td>
<td data-value="{{latestQuoteLog.status}}">
<span class="label bg-{{quoteStatusIdToStatusName[latestQuoteLog.status]}}">
{{quoteStatusPrettyNames[latestQuoteLog.status]}}
</span>
</td>
<td>
<div class="progress-xs progress ng-isolate-scope w-sm m-t-sm" type="info">
<div class="progress-bar progress-bar-primary" role="progressbar"
aria-valuenow="{{quoteStatusProgress[latestQuoteLog.status]}}" aria-valuemin="0"
aria-valuemax="100" ng-
style="width: {{quoteStatusProgress[latestQuoteLog.status]}}%;"></div>
</div>
</td>
<td>
<div class=" btn-group">
<button class="btn btn-sm btn-icon btn-default"
ng-if="latestQuoteLog.status != quoteStatus.quoteCancelled"
ng-click="showCancelQuoteModal(quote)">
<i class="glyphicon glyphicon-remove" tooltip="Cancel Quote"></i>
</button>
<button class="btn btn-sm btn-icon btn-default" ng-click="editQuote(quote)">
<i class="glyphicon glyphicon-edit" tooltip="Edit Quote"></i>
</button>
<button class="btn btn-sm btn-icon btn-default" ng-click="viewQuote(quote)">
<i class="glyphicon glyphicon-eye-open" tooltip="View Quote"></i>
</button>
<button class="btn btn-sm btn-icon btn-default"
ng-click="showModal(quote, roles.broker, 'AT', latestQuoteLog)"
ng-if="canAssign(latestQuoteLog, roles.broker)">
<i class="glyphicon glyphicon-arrow-right" tooltip="Assign To Broker"></i>
</button>
<button class="btn btn-sm btn-icon btn-default"
ng-click="showModal(quote, roles.processor, 'AT', latestQuoteLog)"
ng-if="canAssign(latestQuoteLog, roles.processor)">
<i class="glyphicon glyphicon-arrow-right" tooltip="Assign To Processor"></i>
</button>
<button class="btn btn-sm btn-icon btn-default" ng-click="showModal(quote, roles.broker, 'CA')"
ng-if="canChangeAssignee(latestQuoteLog, roles.broker)">
<i class="glyphicon glyphicon-transfer" tooltip="Change Assignee"></i>
</button>
<button class="btn btn-sm btn-icon btn-default"
ng-click="showModal(quote, roles.processor, 'CA')"
ng-if="canChangeAssignee(latestQuoteLog, roles.processor)">
<i class="glyphicon glyphicon-transfer" tooltip="Change Assignee"></i>
</button>
</div>
</td>
</tr>
</tbody>
<tfoot class="hide-if-no-paging">
<tr>
<td colspan="9" class="text-center">
<ul class="pagination"></ul>
</td>
</tr>
</tfoot>
</table>
这里取消模式
<script type="text/ng-template" id="cancelQuoteModal.html">
<div class="modal-header">
<form name="decisionForm" class="form-horizontal wrapper input-set">
<div class="col-md-10">
<label>
<h4 class="font-thin">Why it is not sold ?</h4>
</label>
<select class="form-control" ng-model="reasonForRejection" name="reasonForRejection" required>
<option ng-repeat="reason in rejectionReasons" value="{{reason}}">
{{reason}}
</option>
</select>
<small
ng-show="(decisionForm.reasonForRejection.$invalid && !decisionForm.reasonForRejection.$pristine) || showErrors"
class="b-light m-t-n-sm m-b font-thin text-danger m-r">Reason is required.
</small>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-sm btn-success" ng-click="cancelQuote(decisionForm)">Confirm Quote Cancellation</button>
<button class="btn btn-warning" ng-click="cancelBox()">Close!</button>
</div>
</script>
这里是CancelModalController
.controller('cancelQuoteModalCtrl', ['$scope', '$modalInstance', 'quoteLogService', 'rejectionReasons', 'quote', function ($scope, $modalInstance, quoteLogService, rejectionReasons, quote) {
$scope.rejectionReasons = rejectionReasons;
$scope.reasonForRejection;
$scope.cancelQuote = function (decisionForm) {
if (decisionForm.$invalid) {
$scope.showErrors = true;
} else {
quoteLogService.create(quote, {
'status': 'quoteCancelled',
'cancellationReason': $scope.reasonForRejection
}, function (createdQuoteLog) {
$modalInstance.close('Quote cancelled successfully!');
}, function (err) {
$modalInstance.dismiss('Error creating new quoteLog');
console.log('Error creating new quoteLog', err);
});
}
};
$scope.cancelBox = function () {
$modalInstance.close();
};
}]);
这里是QouteLogService.js
QuoteLogModule
.factory('quoteLogService', ['$localStorage', '$state', 'LoggedInRestangular', function($localStorage, $state, LoggedInRestangular) {
return {
create: function(quote, quotelog, success, error) {
quote.post('quotelog', quotelog).then(function(createdQuoteLog) {
success(createdQuoteLog);
}, function(err) {
error(err);
});
},