javascript - 機種変更時のhtml更新

Question

私はそのようなコントローラを持っています:

function postCtrl($scope){
    $scope.model = { title: 'one' };

    window.setInterval(function(){
        $scope.model += ' more one,';
    }, 1000);
}

ビュー側:

<div ng-controller="postCtrl">
     <input type="text" ng-model="model.title"/>
</div>

model.title変更時に（1秒ごとに）テキストボックスの値が自動的に更新されるようにします。可能か教えてください

Answer 1

適切な例外処理のために関数を try/catch ブロック内にラップする$timeoutを使用し、$scope.apply(); を実行します。通常の window.setInterval よりも簡単にテストできます:

function postCtrl($scope, $timeout){
    $scope.model = { title: 'one' };

    $timeout(function(){
        $scope.model += ' more one,';
    }, 1000);
}

Answer 2

AngularJS が監視するコンテキストの外部で適用されるモデルの変更は、scope.$apply(function(){...}); にラップする必要があります。

http://docs.angularjs.org/api/ng.$ro​​otScope.Scope

window.setInterval(function(){
    $scope.$apply(function(){
       $scope.model += ' more one,';
    });
}, 1000);

Answer 3

割り当てを呼び出す$scope.$applyかラップするだけです。$scope.model

function postCtrl($scope){
    $scope.model = { title: 'one' };

    window.setInterval(function(){
        $scope.model.title += ', 1';
        $scope.$apply();
    }, 1000);
}

例: http://jsfiddle.net/qeD6Q/

Answer 4

追加のライブラリを使用することにオープンであれば、KnockoutJSはまったく同じことを行います。モデルをバインドすると、モデルが更新されるたびに、対応する HTML が更新されます。