$Scope 变量在 HTML 中不更新，尽管在控制器中不断更新答案

【问题标题】：$Scope Variable not update in HTML, although being updated constantly in the controller$Scope 变量在 HTML 中不更新，尽管在控制器中不断更新
【发布时间】：2016-05-11 14:00:52
【问题描述】：

代码发布在 codepen 上： http://codepen.io/karlsaks/pen/KzEyLR

问题是我正在构建一个计数器，它应该显示数字减少，因为 angular 有 2 路绑定，我确信它们正在我的应用程序的控制器端更新（可以通过访问控制台看到）

我真的没有选择，any1 可以帮忙吗？

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>Counter</title>
  <link rel="stylesheet" type="text/css" href="./style.css">
<!--   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> -->
  <script type="text/javascript" src="angular.min.js"></script>
  <script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="myCtrl">
  <div id="inputBox">  
    <input id="userInput">
    <button type="button" onclick="submit()">Submit</button>
  </div>
  <br>
  <div id="clockdiv">
    <div>
      <span>{{days}}</span>
      <div class="smalltext">Days</div>
    </div>
    <div>
      <span>{{hours}}</span>
      <div class="smalltext">Hours</div>
    </div>
    <div>
      <span>{{minutes}}</span>
      <div class="smalltext">Minutes</div>
    </div>
    <div>
      <span>{{seconds}}</span>
      <div class="smalltext">Seconds</div>
    </div>
  </div>
</body>
</html>


    angular
        .module("myApp", [])
        .controller("myCtrl", ['$scope', function ($scope) { 
            console.log("Controller loaded");
            var vm = this;
            $scope.getTimeRemaining = function(endtime) {
            $scope.t = Date.parse(endtime) - Date.parse(new Date());
            $scope.s = Math.floor(($scope.t / 1000) % 60);
            $scope.m = Math.floor(($scope.t / 1000 / 60) % 60);
            $scope.h = Math.floor(($scope.t / (1000 * 60 * 60)) % 24);
            $scope.d = Math.floor($scope.t / (1000 * 60 * 60 * 24));

            console.log("time remaining :" + $scope.d + " " + $scope.h + " " + $scope.m + " " + $scope.s);
            }

            $scope.initializeClock = function(endtime) {
                var updateClock = function() { 
                    $scope.getTimeRemaining(endtime);
                    $scope.days = $scope.d;
                    $scope.hours = $scope.h;
                    $scope.minutes = $scope.m;
                    $scope.seconds = $scope.s;
                    console.log("time remaining :" + $scope.days + " " + $scope.hours + " " + $scope.minutes + " " + $scope.seconds);
                    if ($scope.t <= 0 ){
                        clearInterval(timeinterval)
                    }   
                }

                updateClock();
                var timeinterval = setInterval(updateClock, 1000);
            }


            $scope.initializeClock(new Date("May 12,2016 11:00:00"))



        }])

【问题讨论】：

标签： javascript angularjs angularjs-scope counter

【解决方案1】：

您要么必须使用特定于角度的$interval 实现，要么必须在每个间隔周期中手动运行$scope.$apply，以便可以消化$scope 更改。

我的首选方法：使用$interval，因为它会自动使用$scope.$apply

编辑：似乎 $scope.$apply 在 Angular 版本 1.5 中不再可用（它在 1.4 中）。所以我认为现在使用 $interval 是强制性的

【讨论】：

谢谢，正是我需要的！工作正常但发现很奇怪，视图不会自动改变，有什么解释吗？
是的，$scope 的每次更新都必须在 $apply 中运行。通常，角度会自动为控制器内运行的所有内容执行此操作。但是：使用 window.setInterval 您将离开控制器范围并将其更改为窗口范围，这当然不使用 $apply

【解决方案2】：

正如上面的 devnull69 回答的那样，你必须使用 $interval 服务，使用 setTimeout 或 setInterval 使进程不知道 AngularJS。所以你在他们之后手动通知 angularJS 使用 $scope.$apply() 或使用他们的服务 $interval / $timeout 已经在幕后这样做了。

所以，在你的情况下，我会建议以下实现：

1 - 在控制器上插入/注入 $interval 服务

.controller("myCtrl", ['$scope', function ($scope, $interval) {

2 - 更改间隔实现（使用 $scope 变量，这样你就不会松散对 timeinterval 变量的引用。

            if ($scope.t <= 0 ){
                    $interval.cancel($scope.timeinterval)
                }   
            }

            updateClock();
            $scope.timeinterval = $interval(updateClock, 1000);

【讨论】：

谢谢，正是我需要的！工作正常但发现很奇怪，视图不会自动改变，有什么解释吗？