自动刷新指令

Posted 2020-11-17 ronnieqin

 

1.指令html模板

<md-input-container class="wrap-auto-refresh">
    <label>{{‘sscTimeRangePicker.refreshEvery‘ | translate}}</label>
    <md-select  style="width: 100px" ng-model="intervalTime"  ng-change="changeTimeRefesh()" auto-id="refresh_interval_time">
        <md-option value="0"  auto-id="refresh_off"><span translate="sscTimeRangePicker.off">OFF</span></md-option>
        <md-option value="5" auto-id="refresh_5_secs">5 <span translate="sscTimeRangePicker.sec">Sec</span></md-option>
        <md-option value="15"  auto-id="refresh_15_secs">15 <span translate="sscTimeRangePicker.sec">Sec</span></md-option>
        <md-option value="20" auto-id="refresh_20_secs">20<span translate="sscTimeRangePicker.sec">Sec</span></md-option>
        <md-option value="30" auto-id="refresh_30_secs">30<span translate="sscTimeRangePicker.sec">Sec</span></md-option>
    </md-select>
</md-input-container>

 

2.指令内容 (主要操作为将该控件的的时间保存到本地localstoryeg

(function(){

    "use strict";


    var nvsAutoRefresh   = function  (){
        return{

            controller:function($scope,$interval,$timeout,localStorageService){
                //auto refesh
                var   autoRefresh;
                (function(){
                    if(!localStorageService.get("autoRefreshTime")){
                        $scope.intervalTime = 15;
                        localStorageService.set("autoRefreshTime",$scope.intervalTime);
                        console.log(localStorageService.get("autoRefreshTime"));
                    }else{
                        $scope.intervalTime =  localStorageService.get("autoRefreshTime");
                        console.log(localStorageService.get("autoRefreshTime"));
                    }

                })();
                $scope.changeTimeRefesh = function(){
                    var intervalValue = $scope.intervalTime;
                    console.log("间隔间隔intervalValue"+intervalValue);

                    if(intervalValue == "0"){
                        if(!localStorageService.get("autoRefreshTime")){
                        console.log("定时刷新已关闭");
                        }else{
                            localStorageService.set("autoRefreshTime",intervalValue);
                        }
                        }else {
                            localStorageService.set("autoRefreshTime",intervalValue);
                        }

                    }
                    
                // $scope.$watch(function () {
                //     return $state.current.name;
                //     console.log($state.current.name);
                // },function(newVal, oldVal){
                //     console.log("lalalal" + newVal,oldVal);
                //     if( newVal =="activeAlarms"|| newVal =="historicalAlarms"){
                //         $interval.cancel(autoRefresh);
                //
                //         $scope.refreshPage();
                //
                //     }else{
                //         $interval.cancel(autoRefresh);
                //     }
                //
                // });

            },
            restrict:‘E‘,
            templateUrl: ‘src/common/directive/nvs-auto-refresh/nvs-auto-refresh.html‘

        };

    }
    angular.module(‘nvs-auto-refresh‘,[])
        .directive(‘nvsAutoRefresh‘,nvsAutoRefresh);

})();

 

 3.在用到该控件的的地方  写入下方法

 var autoFresh = function () {
                var timeRange = Number(localStorageService.get("autoRefreshTime"));
                console.log("timeRange   eeeeeeeeeee"+timeRange);
                var autoRefresh;
                if(timeRange > 0){
                    autoRefresh = $interval(function() {
                        var timeDistance = $scope.toDate - $scope.fromDate;
                        $scope.tDateRange = angular.copy(new Date());
                        $scope.fDateRange = angular.copy(new Date($scope.tDateRange.getTime() - timeDistance));
                        $scope.fromDate = $scope.fDateRange.getTime();
                        $scope.toDate = $scope.tDateRange.getTime();

                        $timeout(function() {
                            $scope.refreshPage();
                        })
                    }, timeRange * 1000);
                }


                $scope.$on("$destroy", function() {    //离开页面时相关操作
                    $interval.cancel(autoRefresh);
                })

            };

            autoFresh();

指令使用需要在index引入指令的js文件  在总moudel加入依赖