입력에 포커스가있을 때 모델이 업데이트되지 않습니다.

포커스가있는 상태에서 입력에 대한 렌더링을 차단하는 지시문을 작성 중입니다.입력에 포커스가있을 때 모델이 업데이트되지 않습니다.

유스 케이스는 우리가 백엔드에서 자주 실시간 업데이트를 수신하며, ng-model 바인딩으로 인해 사용자가 입력 한 내용을 덮어 씁니다. ng-keydown="($event.keyCode === 13) ? $ctrl.setItem($event, $ctrl.item) : return"을 사용하여 enter 키를 눌러 업데이트를 보내면 $ ctrl.setItem이 백엔드에 요청을 보냅니다.

나는 그것을 원했던 것처럼 거의 작동했지만, 편집을 한 후에는 입력을 흐리게 할 때 놀라운 결과가 나타납니다.

app.directive('noUpdatesWhenFocused', function() { 
    return { 
    restrict: 'A', 
    require: '?ngModel', 
    link: function(scope, element, attrs, ngModel) { 
     if (!ngModel || element[0].type !== 'text') { 
     return; 
     } 

     var hasFocus = false; 
     element.on('focus', function() { 
     hasFocus = true; 
     }); 
     element.on('blur', function() { 
     hasFocus = false; 
     ngModel.$render(); 
     }); 

     ngModel.$render = function() { 
     if (!hasFocus) { 
      element.val(ngModel.$viewValue); 
     } 
     }; 
    } 
    }; 
});

첫 번째 입력 필드에 편집을하고 새로운 "업데이트"몇 초 정도 기다린 후 흐리게 경우 https://plnkr.co/edit/XNFA3bQtbGliAhS0uVmP?p=preview 다음 : 나는 $ 간격을 사용하여 백엔드 업데이트를 시뮬레이션 곳

은 내가 plunker했다 모델은 마지막 모델 업데이트 대신 마지막 뷰 편집 상태로 되돌아갑니다. 우리는 항상 백엔드에서 최신 업데이트를 보여주기를 원하므로이 문제를 해결해야합니다. 그러나 나는 어려움을 겪습니다.

출처

2016-07-03 Sammi

알았어. 알았어. blur 이벤트 전에 ngModel. $ pasers가 해고되었습니다. 그래서 파서가 호출 된 마지막 시간에서 바뀌지 않았다면 viewValue를 무시하는 파서를 추가했습니다. 파서가 흐려지면 파서는 호출되지 않았습니다.

var app = angular.module('myApp', []); 
 

 
app.directive('noUpdatesWhenFocused', function() { 
 
    return { 
 
    restrict: 'A', 
 
    require: '?ngModel', 
 
    link: function(scope, element, attrs, ngModel) { 
 
     if (!ngModel || element[0].type !== 'text') { 
 
     return; 
 
     } 
 

 
     var hasFocus = false; 
 
     element.on('focus', function() { 
 
     hasFocus = true; 
 
     }); 
 
     element.on('blur', function() { 
 
     hasFocus = false; 
 
     ngModel.$render(); 
 
     }); 
 
     
 
     ngModel.$render = function() { 
 
     if (!hasFocus) { 
 
      element.val(ngModel.$viewValue); 
 
     } 
 
     }; 
 
     
 
     var vValue = ngModel.$viewValue; 
 
     ngModel.$parsers.unshift(function(viewValue) { 
 
     var returnValue = viewValue === vValue ? ngModel.$modelValue : viewValue; 
 
     ngModel.$setViewValue(returnValue); 
 
     ngModel.$render(); 
 
     vValue = viewValue; 
 
     return returnValue; 
 
     }); 
 
    } 
 
    }; 
 
}); 
 

 
app.run(function($rootScope, $interval) { 
 
    $rootScope.item = 'item'; 
 
    $interval(function(count) { 
 
    if (typeof count === 'number') { 
 
     if($rootScope.item) { 
 
     $rootScope.item = $rootScope.item + '' + count; 
 
     } 
 
     else { 
 
     $rootScope.item = '' + count; 
 
     } 
 
     console.log($rootScope.item); 
 
    } 
 
    },3000); 
 
});

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 
<body ng-app="myApp"> 
 
    <form name="myForm"> 
 
    <input 
 
     no-updates-when-focused 
 
     name="item1" 
 
     ng-model="item" 
 
     size="50" 
 
     required> 
 
    </input> 
 
    <span ng-show="myForm.item1.$error.required">Required!</span> 
 
    </br> 
 
    <input 
 
     name="item2" 
 
     ng-model="item" 
 
     size="50" 
 
     required> 
 
    </input> 
 
    <span ng-show="myForm.item2.$error.required">Required!</span> 
 
    </form> 
 
</body> 
 
</html>

출처

2016-07-04 12:18:03 Sammi

입력에 포커스가있을 때 모델이 업데이트되지 않습니다.

답변

관련 문제