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

使用$timeout将您的函数包装在 try/catch 块中以进行正确的异常处理，并执行 $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 就会刷新。