angularJS api reference : directive

April 23, 2014

ng

ng는 angularJS의 코어 모듈이다. 여기에는 함수, 디렉티브, 오브젝트, 필터 등등이 정의되어 있다. 이 중 ng로 시작하는 디렉티브들을 알아야 UI 핸들링할 때 유용할 것 같아서 어떤 것이 있는지 angularjs.org에 나와있는 api 레퍼런스를 살펴보았다. 문서에 나와있는 디렉티브 명칭은 lowerCamelCase를 사용하여 정의해놓았는데 템플릿에 사용할 때는 dash 스타일로 작성해야 한다.

ng-bind

모델을 바인딩 한다.

<div ng-controller="Ctrl">
  <input type="text" ng-model="name"><br>
  <span ng-bind="name"></span>
</div>
ng-bind-html

html을 바인딩 한다.

ng-blur

blur 이벤트 발생했을 때 행동 지정

ng-change

변화가 생겼을 때 함수를 호출한다.

<input type="checkbox" ng-model="confirmed" ng-change="change()" />
ng-class
  • true, false에 따라서 클래스를 적용하거나 적용하지 않는다.
  • ng-model을 이용하여 클래스를 변경한다.
<!-- { class : true || false } -->
<p ng-class="{strike: deleted, bold: important, red: error}"> ... </p>
<!-- [ ng-model names ] -->
<p ng-class="[style1, style2, style3]"> ... </p>
ng-class-odd, ng-class-even

홀수일 경우 붙이는 클래스, 짝수일 경우 붙이는 클래스를 다르게 할 수 있다.

<ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
  <li ng-repeat="name in names">
   <span ng-class-odd="'odd'" ng-class-even="'even'">
           
   </span>
  </li>
</ol>
ng-click

클릭했을 때 지정 함수 호출, 이벤트 객체는 $event 사용

<button ng-click="share();"> ... </button>
ng-cloak

뭔지 모르겠음.

ng-controller

컨트롤러를 지정할 때 사용한다.

<div ng-controller="MainCtrl"> ... </div>
ng-copy, ng-cut, ng-paste

클립보드에 복사, 잘라내기, 붙이기 등의 이벤트를 감지하여 특정 작동을 수행할 수 있게 해준다.

<input ng-copy="copied=true" ng-init="copied=false; value='copy me'" ng-model="value">
copied: 
<input ng-cut="cut=true" ng-init="cut=false; value='cut me'" ng-model="value">
cut: 
<input ng-paste="paste=true" ng-init="paste=false" placeholder='paste here'>
pasted:
ng-dblclick

더블클릭 했을 때 행동 지정

<button ng-dblclick="count = count + 1" ng-init="count=0">
  Increment (on double click)
</button>
count: 8
ng-disabled

조건에 따라서 버튼을 비활성화 시킨다.

<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
    Previous
</button>
<button ng-disabled="currentPage >= numPages()-1" ng-click="currentPage=currentPage+1">
    Next
</button>
ng-focus

포커스 이벤트가 발생했을 때 행동 지정

ng-hide, ng-show

true, false에 따라서 요소를 감추거나 보여줌. css display로 처리

<div ng-show="checked"> ... </div>
<div ng-hide="checked"> ... </div>
ng-href, ng-src, ng-srcset

href, src 혹은 srcset에 마크업을 쓸 때 필요

<a ng-href="/123">
	<img ng-src="/123" />
</a>
ng-if

true, false에 따라서 DOM 트리에서 지우거나 추가

<span ng-if="checked"> ... </span>
ng-include

html을 인클루드 할 때 사용한다.

<ng-include src="template.url"><ng-include>
<!-- 혹은 -->
<div ng-include="template.url"></div>
ng-init

잘 와닿지 않음.

<script>
function Ctrl($scope) {
  $scope.list = [['a', 'b'], ['c', 'd']];
}
</script>
<div ng-controller="Ctrl">
	<div ng-repeat="innerList in list" ng-init="outerIndex = $index">
		<div ng-repeat="value in innerList" ng-init="innerIndex = $index">
			<span class="example-init">list[  ][  ] = ;</span>
		</div>
	</div>
</div>
ng-keydown, ng-keypress, ng-keyup

키보드 이벤트에 대해서 특정 행동을 하는 디렉티브

<input ng-keydown="count = count + 1" ng-init="count=0">
ng-list

배열을 구분된 문자열로 출력하거나 콤마로 배열을 만든다.

<input ng-model="names" ng-list />
ng-model

input, select, textarea에 쓰인다.

<input ng-model="val" />
ng-model-options

어떤 이벤트가 발생했을 때 모델을 업데이트 할 것인지 결정할 수 있다. 옵션은 updateOn, debounce 두 가지를 지원한다. debounce는 밀리세컨 단위로 입력하여 해당 시간이 지나면 이벤트가 발생할 수 있도록 도와준다.

<input ng-model="val" ngModelOptions="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }" />
ng-mousedown, ng-mouseenter, ng-mouseleave, ng-mousemove, ng-mouseover, ng-mouseup

마우스 이벤트를 바인딩 할 때 사용한다.

<button ng-mousedown="count = count + 1" ng-init="count=0">
  Increment (on mouse down)
</button>
ng-non-bindable

앵귤러가 아무것도 바인딩하지 못하도록 만든다.

ng-open

true, false 값에 따라서 details 태그의 엘리먼트들을 보여주거나 감춘다.

Check me check multiple: <input type="checkbox" ng-model="open"><br/>
<details id="details" ng-open="open">
   <summary>Show/Hide me</summary>
</details>
ng-pluralize

페이스북의 좋아요를 생각하면 쉽다.

<ng-pluralize count="personCount" offset=2
              when="{'0': 'Nobody is viewing.',
                     '1': ' is viewing.',
                     '2': ' and  are viewing.',
                     'one': ',  and one other person are viewing.',
                     'other': ',  and {} other people are viewing.'}">
</ng-pluralize>
ng-readonly

true, false 값에 따라서 인풋박스를 편집 불가능한 상태로 만들어 준다.

Check me to make text readonly: <input type="checkbox" ng-model="checked"><br/>
<input type="text" ng-readonly="checked" value="I'm Angular"/>
ng-repeat

반복을 사용할 때 쓴다. 사용할 수 있는 변수로는 $index, $first, $middle, $last, $even, $odd가 있다.

<li ng-repeat="post in posts"> ... </li>
ng-selected

true, false 값에 따라서 option을 골라준다. option 태그에 사용된다.

Check me to select: <input type="checkbox" ng-model="selected"><br/>
<select>
  <option>Hello!</option>
  <option id="greet" ng-selected="selected">Greetings!</option>
</select>
ng-style

css 스타일을 태그에 적용할 때 사용한다.

<input type="button" value="set" ng-click="myStyle={color:'red'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br/>
<span ng-style="myStyle">Sample Text</span>
<pre>myStyle=</pre>
ng-submit

form 태그에서 사용

<form ng-submit="post();"> ... </form>
ng-switch, ng-switch on, ng-switch-when

선택된 값에 따라서 엘리먼트를 보여주거나 감춘다.

<div ng-controller="Ctrl">
  <select ng-model="selection" ng-options="item for item in items">
  </select>
  <tt>selection=</tt>
  <hr/>
  <div class="animate-switch-container"
    ng-switch on="selection">
      <div class="animate-switch" ng-switch-when="settings">Settings Div</div>
      <div class="animate-switch" ng-switch-when="home">Home Span</div>
      <div class="animate-switch" ng-switch-default>default</div>
  </div>
</div>
ng-transclude

디렉티브와 가까운 부모 엘리먼트를 포함시킬 때 사용한다. 디렉티브에서는 transclude : true 를 설정해줘야 한다.

<script>
  function Ctrl($scope) {
    $scope.title = 'Lorem Ipsum';
    $scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
  }
 
  angular.module('transclude', [])
   .directive('pane', function(){
      return {
        restrict: 'E',
        transclude: true,
        scope: { title:'@' },
        template: '<div style="border: 1px solid black;">' +
                    '<div style="background-color: gray"></div>' +
                    '<div ng-transclude></div>' +
                  '</div>'
      };
  });
</script>

<div ng-controller="Ctrl">
  <input ng-model="title"><br>
  <textarea ng-model="text"></textarea> <br/>
  <pane title=""></pane>
</div>
ng-value

input 태그에 value를 설정할 수 있다.

<input type="radio"
              ng-model="my.favorite"
              ng-value="name"
              id=""
              name="favorite">
기타

a, form, input, script, select, textarea 태그에 대한 설명은 생략.

Comments

comments powered by Disqus