Question

我的model.field可以通过用户输入输入元素来修改，也可以通过后台的其他功能进行修改。当用户在输入中键入更改时，我想忽略这些后台函数对模型所做的任何更改。例如：

$scope.model = {
    field: 'val1'
}

HTML

<input ng-model="model.field" ...>

IE：

model.field具有值＆＃39; val1＆＃39;
用户开始编辑输入（处于活动状态）
模型通过其他方式更改为＆＃39; val2＆＃39;
新值未显示在输入中 - 它仍会显示＆＃39; val1＆＃39;
用户进行的下一个击键（将1更改为A）将覆盖model.field中的任何内容。
model.field现在有价值＆＃39; valA＆＃39;

Answer 1

在元素具有焦点时添加忽略模型的$ formatter似乎运行良好：

angular.module('myApp').directive('ngModelIgnoreWhenActive', function() {
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function(scope, element, attributes, ngModelCtrl) {

            //Track if the element has focus. 
            //True when the user is typing into the field; false otherwise
            scope.hasFocus = false; 
            element.on('focus', function(event) {
                scope.hasFocus = true;
            });
            element.on('blur', function(event) {
                scope.hasFocus = false;
            });

            //Formats value before shown in view
            // If the element has focus, keep it's existing value
            var myFormatter = function(newValue) {
                return scope.hasFocus && element && element[0] ? element[0].value : newValue;
            }

            ngModelCtrl.$formatters.push(myFormatter);
        }
    };
});

然后将指令添加到任何相关输入：

<input ng-model="model.field" ng-model-ignore-when-active>

基于此处显示的extends-ng-model时间戳格式化程序的代码：https://github.com/Plippe/extends-ng-model/blob/master/src/extends-ng-model/ng-model-formatter-parser/ng-model-timestamp.js

防止在编辑时从ng-model更新输入

1 个答案: