0

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

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

4

2 回答 2

2

两个问题：

  1. $scope.count = i;不会是对全局的引用i，因此，无论下一个问题如何，都不会更新（这不是角度问题）。

  2. 您的间隔函数会更新计数器而不会注意到它。为了克服这个问题，使用$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);
  }());
}
于 2013-07-23T20:18:12.307 回答
0

使用以下代码：

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>
于 2013-07-23T20:22:38.643 回答