0

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);
}

javascript で var i が毎秒インクリメントされるため、html の COUNT が更新され続けることを期待していました。

しかし、そうはいきません。

私は自分のコードの何が問題なのかを見つけようとしています.双方向のデータバインディングの概念をデモする良い例は何ですか(javascriptオブジェクトが変更されたときにhtmlに反映される必要があることを意味します)

4

2 に答える 2

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 に答える