2016년 1월 16일 토요일

[AngularJS] directive

쉽게 말해 “AngularJS의 HTML Compiler에 의해 해석된 특정한 행위의 기능을 가진 DOM 엘리먼트”입니다.


1. index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html ng-app="fruitApp" lang="en">
  <head>
    <title>AngularJS directive</title>    
    <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js'></script>
    <script src="app.js"></script>
  </head>
  <body ng-app="fruitApp">
    <div ng-controller="fruitController">
      <my-example></my-example>
    </div>
  </body>
</html>
cs

2. app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var app=angular.module('fruitApp', []);
app.controller('fruitController'function($scope) {
    $scope.person = {
      name'Jteve',
      address: 'korea'
    };
  });
app.directive('myExample'function() {
    return {
      restrict: 'E',
      template: 'Name: {{person.name}} </br> Address: {{person.address}}'
    };
});
cs

3. result

Name: Jteve
Address: korea

4. reference
http://www.nextree.co.kr/p4850/

댓글 없음:

댓글 쓰기