Question

我创建了一个自定义日期过滤器，但是我想为每秒设置一个间隔，使其像时钟发送一样运行。提前谢谢

这是我的代码。

app.filter('DateGap', function() {

  // In the return function, we must pass in a single parameter which will be the data we will work on.
  // We have the ability to support multiple other parameters that can be passed into the filter optionally

  return function update(input, optional1, optional2) {
        var t1 = new Date(input + 'Z');
        var t2 = new Date();
        var dif = t1.getTime() - t2.getTime();
        var Seconds_from_T1_to_T2 = dif / 1000;
        var Seconds_Between_Dates = Math.abs(Seconds_from_T1_to_T2);
        var sec_num = Math.floor(Seconds_Between_Dates); // don't forget the second param
        var hours = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);

        if (typeof PenddingHours != "undefined")
            return hours >= PenddingHours ? true : false;

        if (hours < 10) { hours = "0" + hours; }
        if (minutes < 10) { minutes = "0" + minutes; }
        if (seconds < 10) { seconds = "0" + seconds; }
        var time = hours + ':' + minutes + ':' + seconds;
        return time;
  }

});

Answer 1

以下将每秒运行一次过滤器。我无法使过滤器按原样运行，但它会在控制台中记录更新的日期，以便您至少可以看到它每秒都被调用。

这只是一种方法。您还可以将过滤器应用于控制器中的myDate变量，并跳过将过滤器放入标记中。

＆＃13;

angular.module('intervalExample', [])
  .controller('ExampleController', ['$scope', '$interval',
    function($scope, $interval) {

      $scope.myDate = new Date();

      var stop;

      $scope.startTimer = function() {
        stop = $interval(function() {
          $scope.myDate = new Date();
        }, 1000);
      };

      $scope.stopTimer = function() {
        if (angular.isDefined(stop)) {
          $interval.cancel(stop);
          stop = undefined;
        }
      };

      $scope.$on('$destroy', function() {
        // Make sure that the interval is destroyed too
        $scope.stopTimer();
      });

      $scope.startTimer();
    }
  ])

  .filter('DateGap', function() {

    // In the return function, we must pass in a single parameter which will be the data we will work on.
    // We have the ability to support multiple other parameters that can be passed into the filter optionally

    return function update(input, optional1, optional2) {

      console.log(input);

      var t1 = new Date(input); // + 'Z');
      var t2 = new Date();
      var dif = t1.getTime() - t2.getTime();
      var Seconds_from_T1_to_T2 = dif / 1000;
      var Seconds_Between_Dates = Math.abs(Seconds_from_T1_to_T2);
      var sec_num = Math.floor(Seconds_Between_Dates); // don't forget the second param
      var hours = Math.floor(sec_num / 3600);
      var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
      var seconds = sec_num - (hours * 3600) - (minutes * 60);

      if (typeof PenddingHours != "undefined")
        return hours >= PenddingHours ? true : false;

      if (hours < 10) {
        hours = "0" + hours;
      }
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      var time = hours + ':' + minutes + ':' + seconds;
      return time;
    }

  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<div ng-app="intervalExample">
  <div ng-controller="ExampleController">
    Current time is: <span my-current-time="format"></span> {{ myDate | DateGap }}
  </div>
</div>

＆＃13;

Answer 2

您不能以角度1.x异步更改过滤器的输出。过滤器是纯函数，输出仅取决于输入，这是您的情况下的常量日期。使用控制器来处理时间：

angular.module('intervalExample', [])
  .controller('ExampleController', ['$scope', '$interval',
    function($scope, $interval) {

      $scope.myTime = 0;

      var startTime = Date.now();
      var timer = $interval(function() {
          $scope.myTime = Date.now() - startTime;
      }, 1000);

      $scope.$on('$destroy', function() {
        $interval.cancel(timer);
      });
    }
  ])

  .filter('TimeSpan', function() {

    // In the return function, we must pass in a single parameter which will be the data we will work on.
    // We have the ability to support multiple other parameters that can be passed into the filter optionally

    return function update(input, optional1, optional2) {
      var dif = input;
      var Seconds_from_T1_to_T2 = dif / 1000;
      var Seconds_Between_Dates = Math.abs(Seconds_from_T1_to_T2);
      var sec_num = Math.floor(Seconds_Between_Dates); // don't forget the second param
      var hours = Math.floor(sec_num / 3600);
      var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
      var seconds = sec_num - (hours * 3600) - (minutes * 60);

      if (typeof PenddingHours != "undefined")
        return hours >= PenddingHours ? true : false;

      if (hours < 10) {
        hours = "0" + hours;
      }
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      var time = hours + ':' + minutes + ':' + seconds;
      return time;
    }

  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<div ng-app="intervalExample">
  <div ng-controller="ExampleController">
    Current time is: <span my-current-time="format"></span> {{ myTime | TimeSpan }}
  </div>
</div>

如何在自定义过滤器内设置间隔

2 个答案: