码迷,mamicode.com
首页 > 其他好文 > 详细

自动刷新指令

时间:2018-06-11 19:07:39      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:引入   IV   idt   fresh   刷新   input   NPU   ||   自动   

技术分享图片技术分享图片技术分享图片

 

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加入依赖

 

自动刷新指令

标签:引入   IV   idt   fresh   刷新   input   NPU   ||   自动   

原文地址:https://www.cnblogs.com/RonnieQin/p/9168401.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!