手动更新后单向绑定不起作用

Question

Using Angular 1.5.8, I would like to have an HTML text field that always displays the value of some model value, but I need to use one-way update only (model-to-view update, but not view-to-model). It works but if this text field is manually modified (user types something, which is allowed), the text field doesn't get updated anymore, even after a few model updates. Using Chrome's Developer tools, I can clearly see the value attribute of my <INPUT> being updated, even once the model is updated after a manual update, but the HTML view doesn't reflect this. Any idea why?

This text field is used to display the current page number: the user can freely edit its content without any page change, but when [s]he hits the ENTER key, the entered page number is sent to the model/controller.

HTML:

<div id="pageCtrlPanel" ng-controller="PageController as pageCtrl">
    Page <input id="pageNumTxt" type="text" value="{{pageData.currPage}}">
</div>

Javascript:

app.controller("PageController", function($scope) {
    $scope.pageData = .....;
});

app.directive('keyListener', function(dialogService) {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function(event) {
            var pageController = angular.element( $('#pageCtrlPanel') ).scope().pageCtrl;
            var target = $( event.target );
            scope.$apply(function() {
                // .......
                if ( target.is( 'input' ) ) {
                    if ( target.is( '#pageNumTxt' ) && event.which == 13 ) {
                        // ENTER key pressed on page selection text field
                        event.preventDefault();
                        var newPage = parseInt( $('#pageNumTxt').val() , 10);
                        if (!pageController.goToPage(newPage)) {
                            alert('Invalid page number (should be in [1 ~ ' + pageController.getLastPage() + ']).');
                        }
                    }
                }
            });
            scope.$digest();
        });
    };
});

Answer 1

As per OP's requirement (after discussing about the requirements in the comments), the model update should happen only when the Enter key is pressed.

For achieving this, set ng-model and ng-model-options="{updateOn : 'change blur'}" so that the model update happens only when you tab out or similar way. For updating the model on submit (ie when the Enter key is pressed), use ng-model-options="{updateOn : 'submit'}"