如果您使用setTimeout，AngularJS奇怪的数据绑定行为

Question

看我的小提琴。 http://jsfiddle.net/tyF7q/

我对Angular.js中的数据绑定不了解：

如果您多次单击“ addSomething”，则每次单击都会出现“ test3”。
现在，如果单击“ addSomething2”，则直到2009ms都不会显示任何内容。
但是，如果您单击“ addSomething”，“ test4”也将显示，但仅当您在2009ms之后单击时，否则“ test4”也不会出现。
同样，如果您单击“ addSomething2”，并且在2009ms之后单击“ addSomething2”，则会出现一个“ test4”。

这只是我使用socket.io并具有一些socket.on（）事件绑定时出现的问题的简单示例。 在这种情况下，我的“ addSomething2” ng-click绑定将是socket.on（'addSomething2'），但结果仍然相同。

因为我是angularjs的新手，所以我在这里看不到我做错了什么。

HTML：

 <div ng-app>   
     <div id="edit" ng-controller="Edit">
        <a href="" ng-click="addSomething()">addSomething  </a><br>
        <a href="" ng-click="addSomething2()">  addSomething2</a>
        <div ng-repeat="doneMsgs in doneSoFar">
            {{doneMsgs.status}}:{{doneMsgs.info}} <br>
        </div>
     </div>

    </div>

JS：

函数Edit（$ scope）{

$scope.doneSoFar = [];
$scope.doneSoFar.push({status:"test",info:"test"})
var doneSoFarPush = function(status,info){
    $scope.doneSoFar.push({status: status,info:info });
};
doneSoFarPush('test2','test2');

$scope.addSomething = function() {
    doneSoFarPush('test3','test3');
};

$scope.addSomething2 = function() {
    setTimeout(function(){
    doneSoFarPush('test4','test4');
    },2009);
};
};

Answer 1

您需要直接使用$timeout服务而不是setTimeout 。 这将允许angular管理$digest循环。 否则，您将不得不自行管理将$apply合并范围。

这是更新的小提琴 。

以及更新的代码：

function Edit($scope, $timeout) {


    $scope.doneSoFar = [];
    $scope.doneSoFar.push({status:"test",info:"test"})
    var doneSoFarPush = function(status,info){
        $scope.doneSoFar.push({status: status,info:info });
    };
    doneSoFarPush('test2','test2');

    $scope.addSomething = function() {
        doneSoFarPush('test3','test3');
    };

    $scope.addSomething2 = function() {
        $timeout(function(){
        doneSoFarPush('test4','test4');
        },2009);
    };
};