在这里加载视图时,有人可以帮我解决这个闪烁效果是我的代码。
app.config(function($stateProvider,$urlRouterProvider,$routeProvider, $locationProvider,blockUIConfig) {
$urlRouterProvider.otherwise("/#");
$stateProvider
.state('dash', {
url: "/dash",
templateUrl: 'views/br_manager/pc_dashboard.html',
controller:'dashCtrl'
})
.state('pass', {
url: "/pass",
templateUrl: 'views/br_manager/change_password.html',
controller:'passwordCtrl'
})
.state('classroom', {
abstract:true,
url: "/classroom",
template: '<div ui-view style="height:100%"></div>',
controller:'classroomManagementCtrl'
})
.state('classroom.list', {
url: "",
templateUrl: 'views/br_manager/CR.html'
})
$locationProvider.html5Mode(true);
blockUIConfig.message = "Processing ...";
});
以下是控制器和工厂sevrvice的代码
branchManager.factory('classroomFactory',function($resource,appConfig,$window){
var factory = {};
var fetch_classroom_url = appConfig.getMainAPI();
var authCode = $window.localStorage.getItem("authCode");
factory.fetchStandardList = function(selectedYear) {
return $resource(fetch_classroom_url+'/classroom/year/'+ selectedYear, {}, {
fetch : {
method : 'get',
isArray : false,
headers : { 'Authorization' : authCode },
interceptor : {
response : function(data) {
return data;
}
}
}
});
};
factory.fetchSectionList = function(currentStandard, selectedYear) {
return $resource(fetch_classroom_url+'/classroom/standard/'+ currentStandard +'/section/year/'
+ selectedYear, {}, {
fetch : {
method : 'get',
isArray : false,
headers : { 'Authorization' : authCode },
interceptor : {
response : function(data) {
return data;
}
}
}
});
};
return factory;
});
branchManager.controller('classroomManagementCtrl', function($scope,classroomFactory,appConfig,$state,$modal) {
var initials = {
syllabus:"",section:"",standard:"",year:"",classRoomId:"",maxcount:"",maxCount:""
};
$scope.year_list = ["2015-16","2016-17","2017-18","2018-19"];
$scope.fetchYearList = function(){
$scope.selectedYear = $scope.year_list[0];
$scope.fetchStandardList($scope.selectedYear);
};
$scope.fetchStandardList = function(selectedYear){
var year = window.btoa(selectedYear);
classroomFactory.fetchStandardList(year).fetch({},function(response){
$scope.standard_list =[];
if(response.status == 200 || response.status == 201){
if(response.data.standards != undefined){
var _data = angular.fromJson(response.data.standards);
$scope.standard_list = _data;
console.log( $scope.standard_list);
if($scope.standard_list.length > 0){
$scope.currentStandard = $scope.standard_list[0];
$scope.fetchSectionList($scope.currentStandard,selectedYear);
}else{
$scope.standard_list = ["-Nil-"];
}
}
}
},function(response){
$scope.standard_list = [];
$scope.currentStandard = "-Nil-";
$scope.response_msg = "There is no Standards found for this year.";
$scope.fetchSectionList($scope.currentStandard,selectedYear);
console.log(response.status);
});
};
$scope.fetchSectionList = function(currentStandard,selectedYear){
$scope.response_msg = "";
var standart = window.btoa(currentStandard);
var year = window.btoa(selectedYear);
classroomFactory.fetchSectionList(standart,year).fetch({},function(response){
$scope.classroom_list =[];
console.log(response);
if(response.status == 200 || response.status == 201){
if(response.data.classRoomLists!=undefined){
var _data = angular.fromJson(response.data.classRoomLists);
$scope.classroom_list = _data;
console.log( $scope.classroom_list);
$scope.$parent.setBaseContentHeight($scope.classroom_list.length);
}
}
},function(response){
$scope.classroom_list = [];
$scope.response_msg = "There is no classrooms found for this standard.";
$scope.$parent.setBaseContentHeight(-1);
console.log(response.status);
});
};
$scope.init = function(){
$scope.fetchYearList();
console.log("Init called")
};
$scope.cancel = function () {
$scope.response_msg = "";
$scope.response_msg1 = "";
$state.go('^.list');
};
$scope.init();
});
我的观点看起来像
<div class="col-lg-8 base-content table-base" style="height:90%;">
<div class="container-fluid" style="height: 90%;padding:0">
<div class="container-fluid" style="height: 30px;padding:0">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4" style="font-size: medium;padding: 0 0 10px 0px" >
<a ui-sref="^.add"><button type="button" ng-click="addClassroom()" class="btn btn-color btn-sm">Add ClassRooms</button></a>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="padding: 0 0 20px 20px">
<select class="input-sm form-control" ng-model="selectedYear"ng-change="fetchStandardList(selectedYear)" ng-options="year as year for year in year_list" style="line-height: 1.5">
<option value="" selected="selected">-Year-</option>
</select>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="padding: 0 0 20px 20px">
<select class="input-sm form-control" ng-model="currentStandard" ng-change="fetchSectionList(currentStandard,selectedYear)" ng-options="currentStandard as currentStandard for currentStandard in standard_list" style="line-height: 1.5">
<option value="" selected="selected">-Class-</option>
</select>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 text-success response_msg" style="padding-top: 10px;" ng-hide="response_msg == undefined || response_msg == ''" >{{response_msg}}</div>
</div>
<div class="container-fluid" style="height:auto;padding:0;" ng-if="classroom_list== undefined || classroom_list.length <= 10">
<table class="table table-striped">
<thead>
<tr>
<th width="10%">Classroom Id</th>
<th width="10%">Year</th>
<th width="10%">Standard</th>
<th width="10%">Section</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="classroom in classroom_list">
<td width="10%">{{classroom.classRoomId}}</td>
<td width="10%">{{classroom.year}}</td>
<td width="10%">{{classroom.standard}}</td>
<td width="10%">{{classroom.section}}</td>
</tr>
</tbody>
</table>
<div ng-if="classroom_list.length == 0 || standard_list.length == 0" class="noData">No Classrooms Found</div>
<!-- <div ng-if="classroom_list == undefined " class="noData">Processing...</div>-->
</div>
<div class="container-fluid" style="padding:0" ng-if="classroom_list != undefined && classroom_list.length > 10">
<table class="table">
<thead>
<tr>
<tr>
<th width="10%">Classroom Id</th>
<th width="10%">Year</th>
<th width="10%">Standard</th>
<th width="10%">Section</th>
</tr>
</thead>
</table>
</div>
<div class="container-fluid slim-content" style="padding:0;" ng-if="classroom_list != undefined && classroom_list.length > 10" slim-scroll="{height:'88%',size:'3px',allowPageScroll :true,width:'100%'}">
<table class="table table-striped">
<tbody>
<tr ng-repeat="classroom in classroom_list">
<td width="10%">{{classroom.classRoomId}}</td>
<td width="10%">{{classroom.year}}</td>
<td width="10%">{{classroom.standard}}</td>
<td width="10%">{{classroom.section}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
任何答案都会提前感谢。