角度中的两种方式数据绑定无法按预期工作答案

【问题标题】：two way databinding in angular not working as I expected角度中的两种方式数据绑定无法按预期工作
【发布时间】：2013-07-24 04:24:44
【问题描述】：

我正在通过 Angular 文档测试一个简单的数据绑定概念。

这是示例 html 文件

<body ng-app>
  <h1>Hello, world!</h1>
  <div ng-controller="Ctrl">
    <input type="text" ng-model="count" />
    COUNT: <span ng-bind="count"></span>
  </div>
</body>

这就是Ctrl函数

var i = 0;
function Ctrl($scope) {
  $scope.count = i;
  inc();
}

function inc() {
  i++;
  setTimeout(inc, 1000);
}

我原以为 html 中的 COUNT 会随着 var i 在 javascript 中每秒递增一次而不断更新。

但它不会那样工作。

我正在尝试找出我的代码有什么问题，以及什么是演示双向数据绑定概念的好例子（意味着当 javascript 对象更改时，它应该反映在 html 中）

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

两个问题：

$scope.count = i; 不会是对全局 i 的引用，因此，无论下一个问题如何，都不会更新（这不是角度问题）。
您的区间函数会更新计数器，而不会从角度注意到它。要克服这个问题，请使用$apply 或特殊的角度助手，例如$timeout

一个可行的例子是：

(function (app, ng) {
  'use strict';

  app.controller('Ctrl', ['$scope', '$timeout', function ($scope, $timeout) {
    $scope.count = 0;

    (function _update() {
      $scope.$apply(function () {
        $scope.count += 1;
      });

      $timeout(_update, 1000);
    }());
  }]);
}(angular.module('app', []), angular));

演示：http://jsbin.com/unasaf/1/

或者一个不太复杂的版本是：

function Ctrl($scope, $timeout) {
  $scope.count = 0;

  $scope.increment = function increment() {
    $scope.count += 1;
  };

  (function _update() {
    $scope.increment();    
    $timeout(_update, 1000);
  }());
}

【讨论】：

【解决方案2】：

使用以下代码：

JS：

function Ctrl($scope, $timeout) {
$scope.count = 0;

$scope.increment = function(){
    $scope.count++;
    $timeout(function(){
        $scope.increment();
    }, 1000);
}

$scope.increment();
}

HTML：

  <body>
    <h1>Hello, world!</h1>
    <div ng-controller="Ctrl">
    <input type="text" ng-model="count" />
    COUNT: <span ng-bind="count"></span>
    </div>
  </body>

【讨论】：