Angular DOM：Dom 不会每 1000 毫秒用 $interval 更新一次答案

【问题标题】：Angular DOM : Dom is not getting updated every 1000ms with $intervalAngular DOM：Dom 不会每 1000 毫秒用 $interval 更新一次
【发布时间】：2018-11-16 02:22:19
【问题描述】：

image link for error我正在尝试使用时间数据每秒更新 angular dom，即使在控制台上 $digest 正在运行但它没有更新值，也不会更新。

  angular.module('app').controller('mvCoursesDetailCtrl', function($scope, mvCourse, $routeParams,$interval) {

     $scope.test;

     $scope.course = mvCourse.get({_id:$routeParams.id}, (data)=> {
      console.log(data.published);
      console.log(data.endDate);
      let oneDay = 1000*60*60*24;
      let oneHour = 1000*60*60;
      let oneMinute = 1000*60;
      let oneSecond = 1000;
      let startDate = new Date();
      let startMonth = startDate.getMonth() + 1;
      let endDate = new Date(data.endDate);
       $interval(function () {
       $scope.test = Math.ceil(Math.abs(((startDate.getTime()) - (endDate.getTime())))/oneMinute)+" Minutes "+Math.ceil(Math.abs(((startDate.getTime()) - (endDate.getTime())))/oneSecond)+" s";
        console.log($scope.test);
      },1000);


     });
    });

这是test 变量未更新的地方

<div class="container">
  <h1>{{course .title}}
    <div class="row">
      <div class="col-md-12">
        <h3>Featured</h3>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="row">
          <div class="col-md-6">
            <h3>Published on</h3>
            <h4>{{course.published | date}}</h4>
          </div>
          <div class="col-md-6">
            <h3>Status</h3>
            <h4 ng-show="course.status.toLowerCase() === 'open'">
              <mark class="open">{{course.status | uppercase}}</mark>
            </h4>
            <h4 ng-show="course.status.toLowerCase() === 'booked'">
              <mark class="booked">{{course.status | uppercase}}</mark>
            </h4>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <h3>Time Left</h3>
            <h4>{{test}}</h4>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="panel panel-primary">
          <div class="panel-heading">Tags</div>
          <div class="panel-body">
            <div ng-repeat="tag in course.tags">{{tag}}</div>
          </div>
        </div>
      </div>
    </div>
  </h1>
</div>

请指导我。

【问题讨论】：

没有必要使用粗体和感叹号。
哈哈哈.. 是的，谢谢，但这不是我正在等待的答案。请帮我解决这个错误！ @MatusDubrava
我们无法运行您的代码，因为它具有“课程”依赖项，您能分享一下您收到的错误消息吗？
错误是它没有更新我的角度表达式 {{test}} 即使在控制台 $interval 每秒触发一次但没有更新任何东西！ @RTWorkSpace
我的意思是错误：Angular 在控制台中记录的错误。有两种可能性：要么你的控制器不工作，因此 UI 上什么都没有发生，否则在这两种情况下都存在语法错误.. angular 一定记录了一些错误.. 你能把它粘贴在这里

标签： javascript angularjs dom setinterval

【解决方案1】：

初始化“$scope.test;”有一些价值 $scope.test=0; 如果你不初始化它，它仍然是 NAN。

【讨论】：

不工作！！它开始时被初始化为 0，然后以静态时间值结束，并且永远不会再次更新！

【解决方案2】：

首先 - 用一些值初始化 $scope.test，$scope.test = ""; 第二 - 你应该在 $interval 方法中使用 $scope.$apply() 。 $scope.$apply() 将调用 $scope.$digest() 来更新更改的模型值以供查看。

【讨论】：

不！添加 $interval 在 Angular 中做同样的事情，即它在 Angular 内部调用 $scope.$apply ！这样做会在控制台上抛出一个错误，因为 $digest running 已经在运行了。

【解决方案3】：

实际上你的代码烧毁为：

let startDate = new Date();
let endDate = new Date(data.endDate);
$interval(function () {
       $scope.test = Math.ceil(Math.abs(((startDate.getTime()) - (endDate.getTime())))/oneMinute)+" Minutes "+Math.ceil(Math.abs(((startDate.getTime()) - (endDate.getTime())))/oneSecond)+" s";
        console.log($scope.test);
      },1000);

无论您进行何种计算，startDate 和 endDate 都是固定的，因此您的 $scope.test 将具有一个恒定值（该值不会改变）。我认为您需要更改变量，以便在 $interval 中获取最新时间：

$interval(function () {
       let startDate = new Date();
       $scope.test = Math.ceil(Math.abs(((startDate.getTime()) - (endDate.getTime())))/oneMinute)+" Minutes "+Math.ceil(Math.abs(((startDate.getTime()) - (endDate.getTime())))/oneSecond)+" s";
        console.log($scope.test);
      },1000);

这个问题与范围没有更新无关，实际上你的测试值没有改变。

这就是我的感觉。如果我错了，请纠正我。

【讨论】：

实际上并非如此！实际上，在我的代码中，我在错误的位置插入了 $interval $scope.course，正如您所看到的，并且 $interval 的 b'coz 一次又一次地调用相同的值。我最终所做的是将 $interval 函数复制到 $scope.course 之外并将其放置在控制器中。因此，它起作用了！
嗯，这意味着该服务将每秒调用一次，对吗？这是你的要求吗？
不，我不想那样做，但我正在这样做，所以我得到了那个错误！