在阅读了 Angular 文档后，我正在尝试测试一个简单的数据绑定(bind)概念。
这是示例 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 中每秒递增而不断更新。
但事实并非如此。
我试图找出我的代码出了什么问题，以及什么是演示双向数据绑定(bind)概念的好例子(意味着当 javascript 对象更改时，它应该反射(reflect)在 html 中)
最佳答案
两个问题:
$scope.count = i;不会是对全局i的引用，因此，无论下一个问题如何，都不会更新(此不是 Angular 问题)。您的间隔函数会更新计数器，而 Angular 不会注意到它。要克服这个问题，请使用
$apply或特殊的 Angular 助手，例如$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));
或者一个不太复杂的版本是:
function Ctrl($scope, $timeout) {
$scope.count = 0;
$scope.increment = function increment() {
$scope.count += 1;
};
(function _update() {
$scope.increment();
$timeout(_update, 1000);
}());
}
关于javascript - Angular 中的两种方式数据绑定(bind)未按我的预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17819944/