ProAngularJS Ch.11 엘리먼트와 이벤트

※ 실행결과: http://study.jeju.onl/directives2.html

이번장에서는 엘리먼트와 이벤트를 처리하는 디렉티브들을 설명한다.
주요내용은 다음과 같다.

  • 기타 어트리뷰트 관리
    : ng-href, ng-src, ng-srcset
  • 블리언 어트리뷰트 관리
    : ng-checked, ng-disabled, ng-open, ng-readonly, ng-selected
  • 커스텀 이벤트 디렉티브 생성
    : tap 이라는 사용자 정의 디렉티브 예제
  • 이벤트 처리
    : ng-blur, ng-change, ng-click, ng-dblclick, ng-copy, ng-cut, ng-paste,
    ng-focus, ng-keydown, ng-keyup, ng-keypress, ng-submit,
    ng-mousedown, ng-mouseenter, ng-mouseleave, ng-mousemove,
    ng-mouseover, ng-mouseup
  • 클래스 및 CSS 관리
    : ng-class, ng-class-even, ng-class-odd, ng-style
  • 엘리먼트 표시, 숨김, 제거
    : ng-if, ng-hide, ng-show

예제 실행의 결과들이다.

사용자 이벤트 디렉티브와 콘트롤 활성화/비활성화 기능
ProAngularJS-ch11-ElementEvent4

라디오버튼에 의한 클래스 제어와 테이블 스트라이프 기능
ProAngularJS-ch11-ElementEvent2

테이블의 행을 체크박스를 통해 보이거나 숨기는 기능
ProAngularJS-ch11-ElementEvent1

마우스이벤트를 받아 처리
* 마우스가 떠 있는 행은 색이 바뀌어야 하는데 안바뀐다. 왜지??
이벤트 처리는 정상이고, 브라우져를 바꿔봐도 작동되지 않는다.
JQuery를 써야하나? (예전에도 마우스호버 기능이 불안해서 JQuery 썼던듯)
ProAngularJS-ch11-ElementEvent3

이에 대한 코드이다.

<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
  <title>Directives2 - 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", [])
      .controller("defaultCtrl", function($scope, $location) {

        $scope.todos = [
          { action: "Get groceries", complete: false },
          { action: "Call plumber", complete: false },
          { action: "Buy running shoes", complete: true },
          { action: "Buy flowers", complete: false },
          { action: "Call family", complete: false }
        ];

        $scope.buttonNames = ["Red", "Green", "Blue"];
        $scope.settings = {
          Rows: "Red",
          Columns: "Green"
        };

        $scope.data = {
          rowColor: "Blue",
          columnColor: "Green"
        };

        $scope.handleEvent = function(e) {
          $scope.data.columnColor = (e.type == "mouseover") ? "Green" : "Blue";
          console.log("Event type: "+e.type+" ("+$scope.data.columnColor+")");
        };

        $scope.message = "Tap Me!";

        $scope.dataValue = false;

      })
      .directive("tap", function() {
        return function(scope, elem, attrs) {
          console.log("enter to tap!")
          elem.on("touchstart touchend", function() {
            scope.$apply(attrs["tap"]);
          });
        };
      });


  
  <style type="text/css">
    td > *:first-child { font-weight: bold; }
    tr.Red { background-color: lightcoral; }
    tr.Green { background-color: lightgreen; }
    tr.Blue { background-color: lightblue; }
  </style>
</head>
<body>
  

To do List

Item 3 is complete
<table class="table table-striped"> <thead> <tr> <th>#</th><th>Action</th><th>Done</th> </tr> </thead> <tbody> <!-- <tr ng-repeat="item in todos" ng-if="!item.complete"> --> <!-- tr 생성을 제어하려면 ng-if 또는 ng-repeat에 filter를 이용한다 --> <tr ng-repeat="item in todos | filter: {complete: 'false'}"> <td>{{ $index + 1 }}</td> <td>{{ item.action }}</td> <!-- ng-hide와 ng-show는 CSS 스타일의 display 속성을 제어 --> <td> <!-- DOM 객체에서 삭제 되지 않았기 때문에, td 스타일이 첫번째 자식인 '(Incomplete)'에만 bold가 적용되었다. ** 해결방법은 DOM 에서 아예 제거하거나 스타일 조건을 변경해야 함 --> <!-- <span ng-hide="item.complete">(Incomplete)</span> <span ng-show="item.complete">(Done)</span> --> <!-- ng-if 를 이용하면 DOM 객체에서 아예 제거된다 --> <span ng-if="!item.complete">(Incomplete)</span> <span ng-if=" item.complete">(Done)</span> </td> </tr> </tbody> </table> <hr /> <!-- =================================================== --> <!-- ==== * class와 style 제어 ==== --> <!-- =================================================== -->

{{ key }}

{{ button }}
</div> </div> <table class="table"> <thead> <tr><th>#</th><th>Action</th><th>Done</th></tr> </thead> <tbody> <!-- ng-class는 class 속성을 제어한다 (ng-style 보다 권장) --> <tr ng-repeat="item in todos" ng-class="settings.Rows" ng-class-odd="settings.Columns"> <td>{{ $index + 1 }}</td> <td>{{ item.action }}</td> <!-- ng-style은 직접 css 속성을 제어한다 --> <td ng-style="{ 'background-color': settings.Columns }"> {{ item.complete }} </td> </tr> </tbody> </table> <hr /> <!-- =================================================== --> <!-- ==== * 이벤트 디렉티브들 ==== --> <!-- =================================================== -->
{{ button }}
<table class="table"> <thead> <tr><th>#</th><th>Action</th><th>Done</th></tr> </thead> <tbody> <!-- 사용자 이벤트 처리를 위해 ng-mouse**를 사용했다 --> <tr ng-repeat="item in todos" ng-class="data.rowColor" ng-mouseenter="handleEvent($event)" ng-mouseleave="handleEvent($event)"> <td>{{ $index + 1 }}</td> <td>{{ item.action }}</td> <!-- 마우스 인/아웃에 따라 컬럼색이 변해야 하는데 안된다. 왜지? --> <td ng-class="data.columnColor">{{ item.complete }}</td> </tr> </tbody> </table> <hr /> <!-- =================================================== --> <!-- ==== * 커스텀 이벤트 디렉티브 만들기 ==== --> <!-- =================================================== -->
{{ message }}
<hr /> <!-- =================================================== --> <!-- ==== * 특수 어트리뷰트들 ==== --> <!-- =================================================== -->
Set the data value
<!-- ng-disabled: disabled 속성을 블리언 값으로 제어할 수 있다 --> <!-- 특수 속성들을 관리: ng-checked, ng-open, ng-readonly, ng-selected --> <button class="btn btn-success" ng-disabled="dataValue">My Button</button> <!-- 이 외에도 ng-href, ng-src, ng-srcset 등이 있다. --> </div> </body> </html>

 

답글 남기기

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

WordPress.com 로고

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

Twitter 사진

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

Facebook 사진

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

Google+ photo

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

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: