Angular data-binding $watch

Question

My web page looks like (abbreviated)

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

My code is

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);

The watch event does not get called when the user changes the value of R_NAME via the textbox. It does get called when the page initially loads, just not when values are changed by the user. I have forced the event to fire by using an interval timer, changing a test property and calling $digest. In that case when I debug I can see that nothing entered through the textbox has been stored on the object. So it seems that I have not setup databinding correctly.

if u watch for BOOKING.R_NAME everything should be fine

marcinn
– marcinn

2014-06-24 13:20:17 +00:00
Commented Jun 24, 2014 at 13:20 — marcinn
– marcinn, Commented Jun 24, 2014 at 13:20

Thomas Roch · Accepted Answer · 2014-06-24 13:54:58Z

1

You should use ng-model for two-way binding instead of ng-bind.

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

You can also use ng-change instead of adding a $watch in your controller

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

Controller

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

answered Jun 24, 2014 at 13:54

Thomas Roch

1,2168 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular data-binding $watch

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related