双向数据绑定角度不工作，因为我期望

我想通过角度文档后测试一个简单的数据绑定概念。双向数据绑定角度不工作，因为我期望

这是样本HTML文件

<body ng-app> 
    <h1>Hello, world!</h1> 
    <div ng-controller="Ctrl"> 
    <input type="text" ng-model="count" /> 
    COUNT: <span ng-bind="count"></span> 
    </div> 
</body>

这是按Ctrl功能

var i = 0; 
function Ctrl($scope) { 
    $scope.count = i; 
    inc(); 
} 

function inc() { 
    i++; 
    setTimeout(inc, 1000); 
}

我期待在HTML中的计数将不断更新的变种i加在每个秒的JavaScript。

但它不这样工作。

我试图找出什么是错我的代码，什么是一个很好的例子演示双向绑定的概念（这意味着当JavaScript对象发生变化，也应在HTML中反映出来）

来源

2013-07-23 Raja

两个问题：

$scope.count = i;
不会对全局i的参考，因此，不管下一个问题的，将不更新（这不是一个角的问题）。
你的间隔函数会更新计数器而没有角度注意它。为了克服这个问题，可以使用$apply或特殊的角辅助器，例如， $timeout

的工作的例子是：

(function (app, ng) { 
    'use strict'; 

    app.controller('Ctrl', ['$scope', '$timeout', function ($scope, $timeout) { 
    $scope.count = 0; 

    (function _update() { 
     $scope.$apply(function() { 
     $scope.count += 1; 
     }); 

     $timeout(_update, 1000); 
    }()); 
    }]); 
}(angular.module('app', []), angular));

演示：http://jsbin.com/unasaf/1/

或不太复杂的版本是：

function Ctrl($scope, $timeout) { 
    $scope.count = 0; 

    $scope.increment = function increment() { 
    $scope.count += 1; 
    }; 

    (function _update() { 
    $scope.increment();  
    $timeout(_update, 1000); 
    }()); 
}

来源

2013-07-23 20:18:12 Yoshi

使用下面的代码：

JS：

function Ctrl($scope, $timeout) { 
$scope.count = 0; 

$scope.increment = function(){ 
    $scope.count++; 
    $timeout(function(){ 
     $scope.increment(); 
    }, 1000); 
} 

$scope.increment(); 
}

HTML：

<body> 
    <h1>Hello, world!</h1> 
    <div ng-controller="Ctrl"> 
    <input type="text" ng-model="count" /> 
    COUNT: <span ng-bind="count"></span> 
    </div> 
    </body>

来源

2013-07-23 20:22:38 John

双向数据绑定角度不工作，因为我期望

回答

相关问题