티스토리 뷰

프레임워크/[JS] angularjs

[Angular JS] 한글 입력시 바인딩 오류 수정하기

hs_seo 2015. 7. 13. 14:29

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
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함