如何避免angularjs中的闪烁效果

时间:2016-06-22 11:32:14

标签: javascript angularjs

在这里加载视图时,有人可以帮我解决这个闪烁效果是我的代码。

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>

任何答案都会提前感谢。

0 个答案:

没有答案