Javascript 如何避免angularjs中的闪烁效应_Javascript_Angularjs

Javascript 如何避免angularjs中的闪烁效应

javascript angularjs

Javascript 如何避免angularjs中的闪烁效应,javascript,angularjs,Javascript,Angularjs,有谁能帮我修复视图加载时的闪烁效果吗？这是我的代码 app.config(function($stateProvider,$urlRouterProvider,$routeProvider, $locationProvider,blockUIConfig) { $urlRouterProvider.otherwise("/#"); $stateProvider .state('dash', { url: "/dash", templ

有谁能帮我修复视图加载时的闪烁效果吗？这是我的代码

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 ...";

});

我的观点是

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


增加教室
-年-
-阶级-
{{response_msg}}
教室Id
年
标准
部分
{{教室.教室ID}
{{教室。年份}
{{教室.标准}
{{教室.部分}
没有发现教室
教室Id
年
标准
部分
{{教室.教室ID}
{{教室。年份}
{{教室.标准}
{{教室.部分}

任何答案都会很有帮助，请提前感谢。

当你说“闪烁”时，你的意思是你到处都能看到花括号吗？不，先生，我的意思是每次ajax调用都会在屏幕上闪烁。你能发一把小提琴吗？闪烁是什么意思？可能不相关，但为什么你需要拦截器？当你说“闪烁”时，你的意思是你到处都能看到花括号吗？不，先生，我的意思是每次ajax调用屏幕上都会闪烁。你能发布一个提琴吗？闪动是什么意思？可能不相关，但为什么需要拦截器？

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