Question

我正在使用AngularJS，Ionic和Cordova创建一个项目，我的问题很简单：如何在某段时间内显示元素，如div，（例如，8：00 15.2.2018。 - 20:00 15.2 .2018。），否则隐藏它？

编辑：

这就是我现在所得到的：

(function() {
    'use strict';

    angular
        .module('module-name')
        .directive('timeRestricted', timeRestricted);

    timeRestricted.$inject = [ '$timeout' ]
    function timeRestricted($timeout) {
        var directive = {
            link: link,
            restrict: 'A'
        };
        return directive;

        function link(scope, element, attrs, ctrl) {
            var startTime = Date.parse(attrs.startTime);
            var endTime = Date.parse(attrs.endTime);
            var currentTime = new Date();

            var showTimeoutId = $timeout(
                function() {
                    console.log(`show: ${JSON.stringify(element)}`);
                    element.show();
                },
                currentTime - startTime
            )
            var hideTimeoutId = $timeout(
                function() {
                    console.log(`hide: ${JSON.stringify(element)}`);
                    element.hide();
                },
                endTime - startTime
            )

            element.on('$destroy', function() {
              $interval.cancel(showTimeoutId);
              $interval.cancel(hideTimeoutId);
              $interval.cancel(updateTimeoutId);
            });
        }
    }
})();

现在我Error: element.hide is not a function和element.show相同。我看到几个示例显示了这些函数的类似用法，我的示例中的元素是一个div标签，我使用如下：

 <div time-restricted start-time={{vm.startTime}} end-time={{vm.endTime}>
 </div>

Answer 1

创建了一个示例应用程序来实现相同的目标。我试了5秒钟。

HTML

  <body ng-controller="MainCtrl">
    <p>Hi there!</p>
    <p ng-if="showPanel" style="padding: 10px; background-color: aquamarine;">I'll be visible sometime</p>
  </body>

控制器

app.controller('MainCtrl', function($scope, $timeout) {
  $scope.name = 'World';
  var currentTime = new Date().getTime();
  var startTime = currentTime + 5000;
  //new Date(2018, 3, 15, 08, 00).getTime();
  var endTime = currentTime + 10000;
  //new Date(2018, 3, 15, 20, 00).getTime();

  $scope.showPanel = false;
  $timeout(function(){
    $scope.showPanel = true;
  }, (currentTime - startTime ))  
  $timeout(function(){
    $scope.showPanel = false;
  }, (endTime - startTime ))

});

Answer 2

如果您想要它是实时的，那么在时间对象上添加观察者，或者在HTML中添加一个类或ng-if，或者只是将日期放在您的配置中并基于它隐藏或显示该字段

在某段时间内显示元素，否则隐藏它

2 个答案: