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
10. templateUrl 사용하기 : http://forum.falinux.com/zbxe/index.php?document_srl=826765
11. routeProvider 사용하기 : http://forum.falinux.com/zbxe/index.php?document_srl=828375
12. routeProvider 사용하기 #2 : http://forum.falinux.com/zbxe/index.php?document_srl=828883
13. promise 사용하기 : http://forum.falinux.com/zbxe/index.php?document_srl=830819
14. promise 사용하기 #2 : http://forum.falinux.com/zbxe/index.php?document_srl=831099
15. ng-repeat 사용하기 #2 : http://forum.falinux.com/zbxe/index.php?document_srl=831382
16. ng-repeat 사용하기 #3 : http://forum.falinux.com/zbxe/index.php?document_srl=831663

이번에는 개발하는 과정에서 디버깅을 하기 위한 directive를 만드는 것에 대해서 소개하겠습니다.

지난 글(ng-repeat 사용하기 #3)에서 사용했던 소스를 그대로 사용하도록 하겠습니다.

<!DOCTYPE html>
<html>
<head>
        <title>Binding</title>
</head>
<body>


  <div ng-app="app" ng-controller="foo">
    <div ng-repeat-start="item in '가나다라마바사아자차카타파하'.split('')"></div>
      <div>{{$index + 1}}</div>
      <div>번 째는 </div>
      <div>{{item}}</div>
      <div>입니다</div>
      <div> </div>
    <div ng-repeat-end></div>
  </div>

<script type="text/javascript" src="components/angularjs/angular.js"></script>
<script type="text/javascript" src="components/angular-route/angular-route.js"></script>
<script type="text/javascript" src="javascripts/main.js"></script>
</body>
</html>

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

app.config(function($logProvider) {
    $logProvider.debugEnabled(false);
});

app.controller("foo", function($scope, $log) {
    $scope.itemClicked = function(ev) {
      $log.info(ev);
    };
});


우선 index.html에 debug attribute를 넣어보겠습니다.

<!DOCTYPE html>
<html>
<head>
        <title>Binding</title>
</head>
<body>


  <div ng-app="app" ng-controller="foo" debug>
    <div ng-repeat-start="item in '가나다라마바사아자차카타파하'.split('')"></div>
      <div>{{$index + 1}}</div>
      <div>번 째는 </div>
      <div>{{item}}</div>
      <div>입니다</div>
      <div> </div>
    <div ng-repeat-end></div>
  </div>

<script type="text/javascript" src="components/angularjs/angular.js"></script>
<script type="text/javascript" src="components/angular-route/angular-route.js"></script>
<script type="text/javascript" src="javascripts/main.js"></script>
</body>
</html>


브라우저로 확인해도 당장은 어떠한 변화도 없습니다.

main.js를 수정합니다.


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

app.config(function($logProvider) {
    $logProvider.debugEnabled(false);
});

app.controller("foo", function($scope, $log) {
    $scope.itemClicked = function(ev) {
      $log.info(ev);
    };
});

app.directive("debug", function ($compile) {
    return {
        terminal: true,
        priority: 1000000,
    }
})


이렇게 debug라는 directive를 만들었습니다.

이제 브라우저로 확인해보면 다음과 같이 AngularJS가 변환을 해주지 않고 입력한 내용 그대로 출력이 됩니다.

{{$index + 1}}
번 째는
{{item}}
입니다


이제 아래와 같이 조금 더 코드를 추가해보겠습니다.

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

app.config(function($logProvider) {
    $logProvider.debugEnabled(false);
});

app.controller("foo", function($scope, $log) {
    $scope.itemClicked = function(ev) {
      $log.info(ev);
    };
});

app.directive("debug", function ($compile) {
    return {
        terminal: true,
        priority: 1000000,
        link: function (scope, element) {
            var clone = element.clone();
            element.attr("style", "color:red");
            clone.removeAttr("debug");
            var clonedElement = $compile(clone)(scope);
            element.after(clonedElement);
        }
    }
})


이제 브라우저로 확인하면 아래와 같이 출력이 됩니다.

{{$index + 1}}
번 째는
{{item}}
입니다
 
1
번 째는
가
입니다
 
2
번 째는
나
입니다
 
3
번 째는
다
입니다
 
4
번 째는
라
입니다
 
5
번 째는
마
입니다
 
6
번 째는
바
입니다
 
7
번 째는
사
입니다
 
8
번 째는
아
입니다
 
9
번 째는
자
입니다
 
10
번 째는
차
입니다
 
11
번 째는
카
입니다
 
12
번 째는
타
입니다
 
13
번 째는
파
입니다
 
14
번 째는
하
입니다


편법처럼 보이긴 하지만 directive를 사용해서 디버깅에 활용할 수 있는 방법에 대해서 알아보았습니다.

이 게시물을...