iCheck 플러그인은 HTML input의 type이 Checkbox나 Radio 의 모양을 UX 입장에서 직관적으로 만들어 준다. AngularJS하에서 이런 JQuery Plugin을 사용하려면 Directive(지시자) 화하여 사용해야 하는데 어떻게 만드는지 알아보자
1. Directive 만드는 형식
- 사용하려는 HTML 안에서
<div directiveName ></div>
<script type="text/javascript" src="pluginName.js"></script>
- AngularJS Directive(지시자) 만들기
+ pluginActivationFunction은 플러그인의 호출하는 펑션이다.
+ scope.$eval 은 플러그인의 환경값을 넣어주면 된다
App.directive('directiveName', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
$(element).'pluginActivationFunction'(scope.$eval(attrs.directiveName));
}
};
});
2. iCheck Directive 만들기
- ng-app 모듈에 Directive를 만든다
+ Radio 박스 선택에 따른 부가화면을 show하거나 hidden 하는 처리를 한다
+ Attribute로 ngIcheck 지시자를 만들었다. (HTML에서는 ng-icheck 로 사용된다)
+ ifChecked의 iCheck 이벤트를 받았다. iCheck의 Radio를 사용하면서 AngularJS의 Radio 이벤트를 받을 수 없게 되었기 때문이다
+ Radio의 attribute로 value="file" or "direct" 라는 두개의 Radio 선택 옵션을 주었다.
+ AngularJS Context안에서 $scope의 값 변경을 인식하기 위하여 $scope.$apply()를 iCheck.on listener의 핸들러 펑션에 호출함.
+ $(element).iCheck(<환경값>); 의 plugin 초기화 펑션을 호출해 주었다
.directive('ngIcheck', function() {
return {
restrict: 'A',
controller: function($scope, $element) {
$element.on('ifChecked', function(event){
if(event.target.value === 'file') {
$scope.isFile = true;
$scope.isDirect = false;
$scope.$apply();
} else if(event.target.value === 'direct') {
$scope.isDirect = true;
$scope.isFile = false;
$scope.$apply();
} else {
$scope.isFile = false;
$scope.isDirect = false;
$scope.$apply();
}
});
},
link: function(scope, element, attrs) {
$(element).iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%'
});
}
};
});
// 중요)
// iCheck를 AngularJS의 Directive로 하지 않고 사용하려면 HTML하단에 해당 script를 넣어준다
// 이렇게 하면 Radio 버튼의 이벤트가 AngularJS Context안에서 작동하지 않기 때문에 AngularJS의 기능을 사용할 수 없다
// 결국 이렇게 사용하지 않기 위해선 JQuery Plugin을 AngularJS Directive로 만들어 AngularJS Context에서 돌아가게 해주는 것이다
<script>
$(document).ready(function(){
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%'
});
});
</script>
- HTML에서 사용하기
+ <input type="radio" name="iCheck" .../> : 여기까지는 iCheck에서 사용함
+ <input ... value="file" ng-icheck> : AngularJS에서 사용. ng-icheck Attribute를 만다면 AngularJS가 컴파일하고 link하고 이벤트 반응에 대하여 controller에서 처리한다
+ Radio의 선택에 따라서 ng-show="isFile", ng-show="isDirect"에 따라서 해당 div가 show, hidden 되어 진다
<table id="maForm" class="table table-striped table-bordered">
<thead>
<tr>
<th width="25%"><i class="icon-check-sign icon-small"></i> Options</th>
<th width="75%" class="not-for-mobile"><i class="icon-edit icon-small"></i> Insert Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label>Select Input Method</label> <br>
<table class="table table-condensed">
<tr class="active">
<td><input type="radio" name="iCheck" value="file" ng-icheck /></td>
<td>Upload File</td>
</tr>
<tr class="active">
<td><input type="radio" name="iCheck" value="direct" ng-icheck /></td>
<td>Input Direct</td>
</tr>
</table>
</td>
<td>
<!-- input direct data -->
<div ng-show="isDirect">
<textarea ng-model="ma.direct" class="form-control" rows="12"></textarea>
</div>
<!-- upload file such as .csv -->
<div ng-show="isFile">
<input id="fileupload" ng-model="ma.file" type="file" name="files[]" multiple>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<i class="icon-bar-chart icon-small"></i> Moving Average Chart<br>
<img src="http://www.placehold.it/880x300/EFEFEF/AAAAAA&text=no+image">
</td>
</tr>
</tbody>
</table>
- 결과 : 선택하는 옵션 박스가 iCheck 플러그인을 통하여 좀 더 직관적으로 나오게 되었다
+ 단순한 Radio 옵션
+ 변경된 iCheck Radio 옵션
<참조>
- Correct way to integrate JQuery Plugins in AngularJS
- How to convert a jQuery plugin to AngularJS Directive : 유튜브 동영상
- Directive의 $watch 와 $apply 완벽 이해 : $apply, $digest, $watch 에 대한 상세 설명
- Thinking in AngularJS : Angular Way
'AngularJS > Prototyping' 카테고리의 다른 글
| [AngularJS] Twitter Search 만들기 (0) | 2013.04.05 |
|---|---|
| [AngularJS] Todo 목록 만들기 (0) | 2013.04.05 |
| [AngularJS] Hello World 만들기 (0) | 2013.04.04 |