javascript - 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 が確実に更新されるようにする方法はありますか?

score 1 · Accepted Answer

試しましたか：

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

$watch の最後のパラメーターを true に設定すると、ディープウォッチになります。

score 0 · Accepted Answer

angularJS は変更を追跡しないため、setTimeout を使用しないでください。以前と同様に $scope.$apply を呼び出す必要があります。$timeoutを使用します。

編集: $timeout を使用して投稿したカスタムタイムアウトソリューションを改善し、setInterval と apply の両方を削除できます。

javascript - Angular.js ディープ ウォッチ Coffeescript クラス インスタンス