Daniel Park Daniel Park - 24 days ago 7
Javascript Question

Backspace makes input not populate using ng-model

I have an input tag like this:

<input ng-model='number'>


and a bunch of buttons that populate this input:

<a class='btn' ng-click='pop(1)'>1</a>


This is the pop function:

$rootScope.pop = function(number) {
$rootScope.number = $scope.number + number;
}


The buttons and all populate the model and input correctly, but if I use the backspace key on the keyboard to erase what's currently in the input, clicking the button will no longer populate and display the input field.

I've tried making an event listener for when the backspace key is pressed and handling backspace using a custom function, but that didn't work. Any ideas as to why this happens?

Answer

Fixed the issue above. Apparently this was due to an angular scoping issue.
Instead of using $rootScope.number, I created an object and set the property of the object as number.
For example: $rootScope.obj.number


Using the property of the object fixed the issue, just needed to do a little reading on angular scopes.