Angular数据绑定$ watch

时间:2014-06-24 13:08:24

标签: angularjs data-binding

我的网页看起来像(缩写)

<HTML ng-app="scanning">
...
<BODY ng-controller="scanningController">
<INPUT id=R_name maxLength=50 size=35 ng-bind='BOOKING.R_NAME'>
</BODY>
</HTML>

我的代码是

function scanningController($scope){
    $scope.depot = depot;
    $scope.BOOKING = {R_NAME: ''};
    /* Does anything get changed. */
    $scope.$watch('BOOKING', function() { 
        ...
    }, true);
}

var scanningModule = angular.module('scanning', []);
scanningModule.controller('scanningController', scanningController);

当用户通过文本框更改R_NAME的值时,不会调用监视事件。它在页面最初加载时调用,而不是在用户更改值时调用。 我通过使用间隔计时器,更改测试属性和调用$ digest强制事件触发。在那种情况下,当我调试时,我可以看到通过文本框输入的任何内容都没有存储在对象上。所以我似乎没有正确设置数据绑定。

1 个答案:

答案 0 :(得分:1)

你应该使用ng-model进行双向绑定而不是ng-bind。

<INPUT id="R_name" maxLength="50" size="35" ng-model="BOOKING.R_NAME">

您也可以使用ng-change而不是在控制器中添加$ watch

<INPUT id="R_name" maxLength="50" size="35" ng-model="BOOKING.R_NAME" ng-change="onChange()">

控制器

function scanningController($scope){
    $scope.depot = depot;
    $scope.BOOKING = {R_NAME: ''};
    /* Does anything get changed. */
    $scope.onChange = function () { 
        ...
    };
}