Question

使用Angular 1.5.8，我希望有一个HTML文本字段，它始终显示某个模型值的值，但我只需要使用单向更新（模型到视图更新，但不能查看 - 模拟）。它可以工作，但是如果手动修改了这个文本字段（用户键入了某些内容，这是允许的话），即使经过一些模型更新，文本字段也不会再次更新。使用Chrome的开发人员工具，我可以清楚地看到我的value <INPUT>属性正在更新，即使在手动更新后更新模型，但HTML视图也没有反映这一点。知道为什么吗？

此文本字段用于显示当前页码：用户可以自由编辑其内容而无需更改页面，但是当[s]按下 ENTER 键时，输入的页码为发送给模型/控制器。

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

根据OP的要求（在讨论了评论中的要求之后），只有在按下 Enter 键时才会发生模型更新。

为实现此目的，请设置ng-model和ng-model-options="{updateOn : 'change blur'}"，以便仅在您标签或类似方式时才会发生模型更新。要在提交时更新模型（即按下 Enter 键时），请使用ng-model-options="{updateOn : 'submit'}"

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

1 个答案: