Angular.js深入观看Coffeescript类实例

Question

我有一个像这样的CoffeeScript类：

class Foo
    constructor: (@bar) ->
        setTimeout () =>
            @bar = "changed!"
        , 5000)

在我的控制器中有这样的列表：

$scope.list = [new Foo("1"), new Foo("2")]

我有这样的HTML：

<ul>
    <li ng-repeat="baz in list">
        {{baz.bar}}
    </li>
</ul>

5秒后，$scope.list中的项目值会发生变化，但这不会反映在HTML中。

事情已部分正确连接，因为如果我添加此代码，一切正常（虽然稍有延迟）。 HTML被重新绘制并正确更新。

setInterval () ->
    $scope.$apply () ->
        $scope.crashes = $scope.crashes
, 5000)    

当CoffeeScript类上的属性发生更改时，有没有办法确保HTML更新？

Answer 1

你有没有尝试过：

$scope.$watch('crashes', function (newVal) {
  $scope.crashes = newVal
}, true);

将$ watch的最后一个参数设置为true会使其深受关注。

Answer 2

不要使用setTimeout，因为angularJS不会跟踪更改，您需要调用$ scope。$ apply。使用$timeout。

编辑：您可以使用$ timeout改进您发布的自定义超时解决方案，并删除setInterval和apply。