Angular DOM:Dom不会每隔1000毫秒以$ interval更新一次

时间:2018-06-06 11:49:57

标签: javascript angularjs dom setinterval

image link for error我尝试使用未更新的时间数据每秒更新角度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>

请指导我。

3 个答案:

答案 0 :(得分:0)

初始化&#34; $ scope.test;&#34;有一些价值$ scope.test = 0; 如果你没有初始化它,它仍然是NAN。

答案 1 :(得分:0)

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

答案 2 :(得分:0)

实际上您的代码会烧毁:

import java.util.concurrent.Executors    
import javax.script._    
import scala.concurrent.duration._
import scala.concurrent.{Await, ExecutionContext, Future}

object Prac extends App {

  val scripter = new ScriptEngineManager().getEngineByName("scala")

  val exe = Executors.newFixedThreadPool(100)
  implicit val e = ExecutionContext.fromExecutor(exe)

  val ans = for {
    x <- 1 to 100
  } yield Future {
      val bindings = scripter.createBindings()
      bindings.put("x", x)
      val script = scripter.eval(
        """

      def sqrt(n:Int) = math.sqrt(n)

      sqrt(x.asInstanceOf[Int])

    """.stripMargin, bindings)
      require(script == math.sqrt(x))
      println(x+" - " + script)
  }
  Await.result(Future.sequence(ans), 20 seconds)

}

无论您的计算是什么,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将具有一个常量值(该值不会更改)。我认为您需要更改变量,以便在$ interval中获取最新时间:

$scope.test
  

这个问题与未更新的范围无关,实际上您的测试值没有变化。

这就是我的感受。如果我错了,请纠正我。