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
08. Directive #2 : http://forum.falinux.com/zbxe/index.php?document_srl=808009
09. $scope? scope? : http://forum.falinux.com/zbxe/index.php?document_srl=818891

08번에서 실습했던 zippy directive를 다시 사용해보도록 하겠습니다.

<!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>


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;
                        }
                }
        }
});


여기까지가 08장에서 실습했던 내용입니다.


이런식으로 script들을 구성하다보면 코드가 산재되고 재활용이 불가능하다는 단점이 있습니다. 그러므로 template안의 내용을 한군데로 모을 필요가 있습니다.


두가지 방법이 있습니다.


우선 파일로 분리하는 방법을 보도록 하겠습니다.


스크립트를 아래와 같이 수정하고,

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

app.directive("zippy", function() {
        return {
                restrict: "E",
                transclude: true,
                scope: {
                        title: "@"
                },
                templateUrl: "zippy.html",
                link: function (scope) {
                        scope.isContentVisible = false;
                        scope.toggleContent = function() {
                                scope.isContentVisible = !scope.isContentVisible;
                        }
                }
        }
});


public/zippy.html 파일을 생성합니다.

<div> <h3 ng-click='toggleContent()'>{{title}}</div><div ng-show='isContentVisible' ng-transclude></div></div>


정말 간단하게 어디서건 재활용이 가능하게 분리가 되었습니다.



다음 방법은 app이 있는 html안에 embed시키는 방법이 있습니다.

스크립트는 수정한 그대로 두고, public/zippy.html은 삭제해도 됩니다. (삭제를 하지 않더라도 embed된 template가 우선권이 있습니다.)

그리고 public/index.html을 아래와 같이 수정합니다.

<!DOCTYPE html>
<html>
<head>
        <title>Binding</title>
</head>
<body>
<div ng-app="app">
        <script type="text/ng-template" id="zippy.html">
                <div> <h3 ng-click='toggleContent()'>{{title}}</div><div ng-show='isContentVisible' ng-transclude></div></div>
        </script>
        <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>


이 방법을 사용할 때는 주의해야하는 점이 하나 있습니다.


<script type="text/ng-template"....> ---- </script> 

이 부분이 반드시 ng-app안에 포함되어있어야 한다는 점입니다.


확인해 보고 싶으신 분은 저 부분을 <div ng-app...> --- </div> 위로도, 아래로도 옮겨보시면 에러가 나는 것을 확인하실 수 있습니다.



이렇게 template내용을 별도로 분리하여 관리하는 방법에 대해서 알아보았습니다.

이 게시물을...