Angular JS 한글 입력 바인딩 오류 수정
Angular JS를 input에 사용할 때 숫자, 영문은 모델에 바로 값이 바인딩 되는데,
한글은 입력 후 엔터키 or 스페이스키 등을 눌러야 모델에 값이 반영이 된다.
이를 수정하기 위해서 application에 새로운 지시자(directive)를 생성하고 적용해주면 된다.
소스코드
{{input_text}}
{{input_text2}} |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>example 01-05</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="myApp" >
<div ng-controller="myCtrl">
<input type="text" ng-model="input_text">
<p ng-bind="input_text"></p>
<h1>{{input_text}}</h1>
</div>
<div ng-controller="myCtrl2">
<input type="text" ng-model="input_text2" kr-input>
<p ng-bind="input_text2">
<h1>{{input_text2}}</h1>
</div>
<script>
var application = angular.module('myApp', [])
application.controller('myCtrl', function($scope) {
$scope.input_text = 'Hello Wrold!';
});
application.controller('myCtrl2', function($scope) {
$scope.input_text2 = 'Hello Wrold2!';
});
// directive 신규 생성
application.directive('krInput', [ '$parse', function($parse) {
return {
priority : 2,
restrict : 'A',
compile : function(element) {
element.on('compositionstart', function(e) {
e.stopImmediatePropagation();
});
},
};
} ]);
</script>
</body>
</html>
참조
http://qiita.com/koh110/items/4c5d22339ef2117e226a
http://erith.blog.me/220185166416
http://erith.blog.me/220185166416
반응형
'프레임워크 > [JS] angularjs' 카테고리의 다른 글
| [AngularJS] AngularJS의 사용자 정의 필터 (0) | 2015.07.15 |
|---|