angularjs重新初始化指令

时间:2016-09-22 07:34:08

标签: javascript angularjs angularjs-directive countdown

我有以下代码

HTML

<countdown ng-show="vm.inhotel" init-val="vm.finishtime" init-lastmess="''" init-mess="'Sjekk ut'"></countdown>

控制器

vm.finishtime = 0;
vm.inhotel = false;

$rootScope.$on('enterhotel', function(data) {
    console.log(data);
    console.log("entering hotel for " + data.totime);
    vm.inhotel = true;
    vm.finishtime = new Date().getTime() + 60 * 60 * 24 * 1000;
});

倒计时目录

angular
    .module('users')
    .directive('countdown', countdown);

function getFormattedTime(secs) {
    var date = new Date(null);
    date.setSeconds(secs);
    return  date.toISOString().substr(11, 8);
}

function countdown() {
    return {
        restrict: 'E',
        template: '<div class=\"{{class}}\" style=\"{{isfloating}} margin-right:5px;\""><span style=\"font-size:{{firstsize}}px;\">{{firstmess}}</span> <span style=\"font-size:{{initsize}}px;\">{{result}}</span></div>',
        scope: {
            initVal: '=',
            initMess: '=',
            initLastmess: '=',
            initMesssize: '=',
            initSize: '=',
            initIsfloating: '=',
        },
        controller: function($scope, $interval) {

            if ($scope.initIsfloating) {
                $scope.isfloating = 'float:left;';
            } else {
                $scope.isfloating = '';
            }

            if ($scope.initLastmess == 'undefined') {
                $scope.initLastmess = '';
            }

            $scope.countdownVal = $scope.initVal;
            $scope.countdownVal = Math.floor($scope.countdownVal / 1000) - Math.floor(Date.now() / 1000);

          var b = getFormattedTime($scope.countdownVal);
            $scope.class = "";
            $scope.firstsize = $scope.initMesssize;
            $scope.initsize = $scope.initSize;
            $scope.firstmess = $scope.initMess;
            if ($scope.countdownVal > 0) {
                $scope.result =  b + " " + $scope.initLastmess;
            } else {
                $scope.class = "";

                $scope.result =  "00:00:00 " + $scope.initLastmess;
            }


            $interval(function () {
                $scope.firstsize = $scope.initMesssize;
                $scope.initsize = $scope.initSize;
                $scope.firstmess = $scope.initMess;

                if ($scope.initIsfloating) {
                    $scope.isfloating = 'float:left;';
                } else {
                    $scope.isfloating = '';
                }

                if ($scope.initLastmess == 'undefined') {
                    $scope.initLastmess = '';
                }
                if ($scope.countdownVal > 0) {
                    $scope.class = "";
                    $scope.countdownVal = $scope.initVal;
                    $scope.countdownVal = ($scope.initVal / 1000) - Math.floor(Date.now() / 1000);
                    $scope.result =  getFormattedTime($scope.countdownVal) + " " + $scope.initLastmess;
                } else {
                    $scope.class = "";

                    $scope.result = " 00:00:00 " + $scope.initLastmess;
                }
            }, 1000);
        }
    }



};

但倒计时不会改变新的终结时间对象。是否有可能重新初始化倒计时指令以使用我的新倒计时刷新它?

0 个答案:

没有答案