Question

我试图在通过角度文档后测试一个简单的数据绑定概念。

这是示例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中）

Answer 1

两个问题：

$scope.count = i;不会引用全局i，因此，无论下一个问题如何，都不会更新（这不是角度问题）。
< / LI>
您的间隔函数会在没有角度注意的情况下更新计数器。要克服这个问题，请使用$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);
  }());
}

Answer 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>

角度的双向数据绑定不能像我预期的那样工作

2 个答案: