01. Binding : http://forum.falinux.com/zbxe/index.php?document_srl=804623
02. Controller : http://forum.falinux.com/zbxe/index.php?document_srl=804950
03. controller 사이의 데이터 공유 : http://forum.falinux.com/zbxe/index.php?document_srl=805325
04. controller에 메소드 만들기 : http://forum.falinux.com/zbxe/index.php?document_srl=805915
05. Filter : http://forum.falinux.com/zbxe/index.php?document_srl=806499
06. ng-repeat와 filter의 응용 : http://forum.falinux.com/zbxe/index.php?document_srl=806788
07. Directive : http://forum.falinux.com/zbxe/index.php?document_srl=807545

이번에는 이때까지 만든 것을들 모두 버리고 directive를 어떻게 만드는지 순서대로 작업을 해보도록 하겠습니다.

우선 가장 기본적인 형태를 만들어 보겠습니다.
<!DOCTYPE html>
<html>
<head>
        <title>Binding</title>
</head>
<body>
<div ng-app="app">
        <zippy>
        </zippy>
</div>
<script type="text/javascript" src="components/angularjs/angular.js"></script>
<script type="text/javascript" src="javascripts/main.js"></script>
</body>
</html>

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

app.directive("zippy", function() {
        return {
                restrict: "E",
                template: "<div>hello world</div>"
        }
});


브라우저로 열어서 확인하면 hello world 만 표시됩니다.



이제 html을 수정하여 data binding을 설정합니다.

<!DOCTYPE html>
<html>
<head>
        <title>Binding</title>
</head>
<body>
<div ng-app="app">
        <input type="text" ng-model="model.title">
        <input type="text" ng-model="model.content">

        <zippy title="{{model.title}}">
                Content: {{model.content}}
        </zippy>
</div>
<script type="text/javascript" src="components/angularjs/angular.js"></script>
<script type="text/javascript" src="javascripts/main.js"></script>
</body>
</html>


브라우저로 확인하면 입력박스가 2개가 더 표시되지만 입력을 하더라해도 어떤 변화도 없습니다.



이제 스크립트를 수정해서 바인딩 된 데이터를 directive에서 처리해보도록 하겠습니다.

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

app.directive("zippy", function() {
        return {
                restrict: "E",
                scope: {
                        title: "@"
                },
                template: "<div> <h3>{{title}}</div><div>hello world</div></div>"
        }
});


브라우저로 확인하면 첫번째 입력창에 텍스트를 입력하면 타이틀이 표시되는 것을 확인할 수 있습니다.



이제 스크립트에서 directive scope안의 function을 만들어 보도록 하겠습니다.

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

app.directive("zippy", function() {
        return {
                restrict: "E",
                scope: {
                        title: "@"
                },
                template: "<div> <h3 ng-click='toggleContent()'>{{title}}</div><div ng-show='isContentVisible'>hello world</div></div>",
                link: function (scope) {
                        scope.isContentVisible = false;
                        scope.toggleContent = function() {
                                scope.isContentVisible = !scope.isContentVisible;
                        }
                }
        }
});


브라우저를 열어서 확인을 합시다. 타이틀을 입력하고 타이틀을 클릭하면 hello world가 보였다가 안보였다가 합니다.

toggleContent 함수는 zippy directive의 scope에만 존재하는 함수가 되고, isContentVisible 변수 역시 마찬가지 입니다.

이렇게 angular-js를 사용하면 변수 및 함수를 고립시킬 수 있는 장점이 있습니다.



이제 content를 제대로 표시할 수 있도록 해보겠습니다.

역시 스크립트를 수정합니다.

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

app.directive("zippy", function() {
        return {
                restrict: "E",
                transclude: true,
                scope: {
                        title: "@"
                },
                template: "<div> <h3 ng-click='toggleContent()'>{{title}}</div><div ng-show='isContentVisible' ng-transclude></div></div>",
                link: function (scope) {
                        scope.isContentVisible = false;
                        scope.toggleContent = function() {
                                scope.isContentVisible = !scope.isContentVisible;
                        }
                }
        }
});


이제 두개의 입력창에 title과 content를 입력하고 title을 클릭하면 입력한 content가 표시됩니다.



이런 식으로 angular-js의 directive를 사용하면 코드의 재활용을 쉽게 할 수 있고, 고립된 함수 및 변수들을 사용함으로서 다른 부분에 최대한 영향을 덜 미치면서 개발을 할 수 있습니다.

이 게시물을...