Question

我正在尝试执行以下操作：

angular.module("controllers", [])
    .controller("FooController", function($scope) {
        $scope.foo = {};
        $scope.foo['bar'] = 0;
        setInterval(function(){
            $scope.foo['bar']++;
        }, 100);
} );

然后，我使用

在我的视图中显示foo.bar的值

<div> {{ foo.bar }} </div>

初始值显示正确，但永远不会更新。正确调用setInterval中的回调，并在javascript中更新bar的值。

我如何以编程方式＆＃34;推送＆＃34;我的数据进入模型？（在我的真实应用程序中，我将通过websockets / atmosphere从服务器推送数据）

Answer 1

如果使用angular $ interval服务而不是setInterval。然后你不需要调用$ scope。$ apply。

angular.module("controllers", [])
    .controller("FooController", function($scope, $interval) {
        $scope.foo = {};
        $scope.foo['bar'] = 0;
        $interval(function(){
            $scope.foo['bar']++;
        }, 100);
} );

Answer 2

您必须触发一个新的digest周期，其中Angular将检查所有已注册的手表并更新视图以查找更改值的对象。您可以通过调用$scope.$apply来执行此操作，这将为您触发摘要周期。

 setInterval(function(){
     $scope.$apply(function() {
         $scope.foo.bar++;
     })
 }, 100);

Answer 3

好的，我找到了答案：将$scope.foo['bar']++换成

$scope.$apply(function({
    $scope.foo['bar']++
}))

在angularjs中以编程方式更新模型

3 个答案: