ProAngularJS Ch15. 커스텀 디렉티브

* 실행 결과1: http://study.jeju.onl/cust-directives.html
* 실행 결과2: http://study.jeju.onl/jqlite-directives.html

커스텀 디렉티브는
내장 디렉티브에서 필요한 기능을 제공하지 못할 때,
복잡한 기능을 HTML이 아니라 코드로 표현하려고 할 때,
여러 애플리케이션에서 활용할 만한 기능 모듈을 구현하려고 할 때
활용한다.

커스텀 디렉티브 구현
– 디렉티브 정의: module.directive()
– 링크함수 구현: function( scope, element, attrs)
– 스코프로부터 데이터 가져오기: scope[ attrs[“속성명”] ]
– HTML 엘리먼트 생성: angular.element(), element.append()
– 데이터 속성 의존성 제거: 명시적인 속성명 가져오기
– 표현식 평가: 필터 사용을 위해
– 데이터 변화 처리: $watch() 함수를 이용해야 한다
– 스코프 문제 처리: 즉시 호출 함수 표현식(IIFE)
jqLite 활용
– 문서 객체 모델 탐색: children(), eq(index), find(tag), next(), parent()
– 엘리먼트 수정: addClass(), attr(), css(), hasClass(), prop(), removeAttr(), removeClass(), text(), toggleClass(), val()
– 엘리먼트 생성 및 제거: angular.element(), after(), append(), clone(), prepend(), remove(), replaceWith(), wrap()
– 이벤트 처리: on(), off(), triggerHandler()
– 기타 jqLite 메서드: data(key), removeData(key), html(), ready(handler)
jqLite를 통한 AngularJS 기능 접근 (실제로는 거의 사용 안함)
– controller(name), injector(), isolatedScope(),
scope(), inheritedData(key)
제이쿼리를 통한 jqLite 대체
– appendTo() 등등

이 장에서 나온 중요한 내용

즉시 실행 패턴 함수 (IIFE)

함수를 선언이 아닌 표현식(Expression)으로 기술하는 것인데, 이것은 인터프리터가 해당 라인에 도달 하였을때만 실행이 됩니다. 즉, 함수의 실행시점을 제어합니다.

예제 코드입니다.

foo(); // success!
function foo() {
    alert('foo');
}

foo(); // "foo" is not defined.
var foo = function() {
    alert('foo');
};

alert(foo); // "foo" is not defined.
(function foo () {});
alert(foo); // "foo" is not defined.

이에 관련된 내용은 다음 문서들을 참고함!
참고1 http://chanlee.github.io/2014/01/11/understand-javascript-iife/
참고2 http://ohgyun.com/474
참고3 http://benalman.com/news/2010/11/immediately-invoked-function-expression/#iife

실행 결과에 대한 소스코드는 다음과 같다.

1) cust-directives.html

<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
  <title>Custom Directives - ProAngularJS</title>
  <link href="/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
  <link href="/node_modules/bootstrap/dist/css/bootstrap-theme.css" rel="stylesheet" />

  <!-- 주의!!: jQuery 스크립트 파일이 angular 보다 먼저 로드되어야 한다 
        ==> appendTo()를 인식하지 못함 -->
  https://code.jquery.com/jquery-1.11.3.min.js

  /node_modules/angular/angular.js
  /node_modules/angular/angular-route.js

  

    angular.module("exampleApp", [])
      .directive("unorderedList", function() {

        // 주의: 일반 자바스크립트 인자라서 전달객체의 순서가 정해져 있다
        return function(scope, element, attrs) {

          // scope로부터 데이터를 전달받는 방법
          var data = scope[ attrs["unorderedList"] ];

          // 의존성을 없애기 위해 명시적으로 정의된 데이터 이름을 가져온다
          //var propertyName = attrs["listProperty"];
          var propertyExpression = attrs["listProperty"];

          if (angular.isArray(data)) {

            //var listElem = angular.element("");
            //element.append(listElem);

            // jQuery 의 appendTo 함수로 두줄을 통합
            var listElem = angular.element("").appendTo(element);

            /*						
            for( var i=0; i").text(data[i].name));

              // 값을 그대로 출력하므로 filter를 사용할 수 없다
              //listElem.append( angular.element("")
              //	.text(data[i][propertyName]));

              // 값을 표현식으로 인식하도록 하기 위해서 $eval 함수를 사용
              //listElem.append( angular.element("
")
              //	.text( scope.$eval(propertyExpression, data[i]) ));

              var itemElement = angular.element("
");
              listElem.append( itemElement);
              var watcherFn = function( watchScope) {
                // 필터 사용을 위해 $eval 함수를 계속 사용한다
                // 문제: watcherFn가 호출될 때에는 i가 for 루프를 끝낸 후이다
                // ==> 없는 데이터를 참조하므로 공란으로 나온다!
                return watchScope.$eval( propertyExpression, data[i]);
              };

              // $watch 함수를 이용하여 변경된 newValue가 출력되도록 감시한다
              scope.$watch( watcherFn, function( newValue, oldValue) {
                itemElement.text( newValue);
              });
            }
            */

            for( var i=0; i 정의하는 즉시 호출되는 함수 (또는 자기 실행 함수)
              // ==> 형식: (function() { ... }());
              (function() {

                //var itemElement = angular.element("
");
                //listElem.append( itemElement);

                // jQuery 의 appendTo 함수로 두줄을 통합
                var itemElement = angular.element("
").appendTo(listElem);

                var index = i;
                var watcherFn = function( watchScope) {
                  return watchScope.$eval( propertyExpression, data[index]);
                };

                scope.$watch( watcherFn, function( newValue, oldValue) {
                  itemElement.text( newValue);
                });

              }());
            }

          }
        };

      })
      .controller("defaultCtrl", function($scope) {

        $scope.products = [
          { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
          { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
          { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },

          { name: "Tuna", category: "Fish", price: 20.45, expiry: 3 },
          { name: "Salmon", category: "Fish", price: 17.93, expiry: 2 },
          { name: "Trout", category: "Fish", price: 12.93, expiry: 4 },

          { name: "Beer", category: "Drink", price: 2.99, expiry: 365 },
          { name: "Wine", category: "Drink", price: 8.99, expiry: 365 },
          { name: "Whiskey", category: "Drink", price: 45.99, expiry: 365 }
        ];

        // 커스텀 디렉티브를 사용한 경우, 변경된 값이 HTML에 자동으로 반영되지 않는다.
        // ==> $watch 가 필요하다!!
        $scope.incrementPrices = function() {
          for( var i=0; i "+$scope.products[i].price);
          }
        };

      });

  
  

  <style type="text/css">
  </style>
</head>
<body ng-controller="defaultCtrl">
  

    
      Products
    
    
      
        Content will go here
      
    </div>

    
      
        Change Prices
      
      
        Content will go here
      
    </div>

  </div>
</body>
</html>

2) jqlite-directives.html

<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
  <title>jqLite - ProAngularJS</title>
  <link href="/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
  <link href="/node_modules/bootstrap/dist/css/bootstrap-theme.css" rel="stylesheet" />

  /node_modules/angular/angular.js
  /node_modules/angular/angular-route.js
  
  

    angular.module("exampleApp", [])
      .directive("demoDirective1", function() {

        return function( scope, element, attrs) {

          // children(): DOM 객체의 자식 노드 탐색 함수
          // var items = element.children();

          // find(): DOM 객체의 모든 자식 노드 탐색 함수
          var items = element.find("li");
          
          // get 기능 함수들
          // ==> attr(), css(), hasClass(), prop(), text(), val()
          items.css("color", "red");

          // 그 밖에 추가, 수정, 삭제 함수들
          // ==> addClass(), removeAttr(), removeClass(), toggleClass()

          for( var i=0; i");

          // 때문에 angular.element로 자식 노드를 만들어 추가한다!
          var listElem = angular.element("");
          element.append( listElem);

          for( var i=0; i").append("").text(scope.names[i]);
            listElem.append( 
                angular.element("")
                .append( angular.element("").text(scope.names[i]) )
                );
          }

          var buttons = element.find("button");
          // on(): 객체에 대한 이벤트 핸들러를 정의
          // 이 외의 이벤트 처리 jqLite 메서드: off(), triggerHandler()
          buttons.on("click", function(e) {
            element.find("li").toggleClass("bold");
          });

        };

      })
      .controller("defaultCtrl", function( $scope) {

        $scope.names = ["Apples", "Bananas", "Oranges"];

      });

  
  <style type="text/css">
    .bold { font-weight: bold; }
  </style>
</head>
<body ng-controller="defaultCtrl">
  <h3>Fruit</h3>
  <ol demo-directive1>
    <li>Apples</li>
    <ul>
      <li>Bananas</li>
      <li>Cherries</li>
      <li>Oranges</li>
    </ul>
    <li>Oranges</li>
    <li>Pears</li>
  </ol>

  <hr />

  
    Click Me
  
</body>
</html>

카테고리: 웹앱개발
Tag: Angular, Directive, iife, JS, ProAngularJS

게시자: 토니아빠

웰시코기 토니와 함께 제주도에 살고 있는 프리랜서 개발자입니다. 웹앱 개발과 데이터분석을 합니다. 제주도 여행/관광 관련 큐레이션 서비스를 준비중입니다. 토니아빠의 모든 글 보기

답글 남기기 응답 취소

여기에 댓글을 입력하세요...

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

이메일 (필수) (주소는 공개되지 않습니다)

이름 (필수)

웹사이트

WordPress.com의 계정을 사용하여 댓글을 남깁니다. ( 로그아웃 / 변경 )

Google의 계정을 사용하여 댓글을 남깁니다. ( 로그아웃 / 변경 )

Twitter의 계정을 사용하여 댓글을 남깁니다. ( 로그아웃 / 변경 )

Facebook의 계정을 사용하여 댓글을 남깁니다. ( 로그아웃 / 변경 )

취소

%s에 연결하는 중

	서인석 (스프링4 HaspMap으로 DB select …)
	하루히즘 (vim 설정하기 (typescript High…)
	신형 (OpenLayers 3에서 Daum Map 사…)
	jetshin (OpenLayers 3에서 Daum Map 사…)
	김김 (OpenLayers 3에서 Daum Map 사…)

Products

이것을 평가하기:

이것이 좋아요:

이 글 공유하기:

게시자: 토니아빠

답글 남기기 응답 취소