Angular.js 라이브러리는 문자열 "ng"로 시작하는 속성으로 태그에 기능을 부여합니다.
일반 개발자도 특별한 속성을 만들어 태그에 기능을 부여할 수 있습니다.
var app = angular.module('custom', []);
// 사용자 정의 속성은 directive() 메서드로 만듭니다.
// 첫 번째 매개변수는 사용자 정의 속성 이름을 입력하고
// 두 번째 매개변수는 함수를 리턴하는 함수를 입력합니다.
app.directive('customTimer', function($http){
return function(scope, element, attrs){
}
});
<h1 custom-timer="model"></h1>
scope - 태그가 속한 컨트롤러의 $scope 속성을 의미
scope 속성을 알아보려면 컨트롤러를 만들어야 합니다.
예)
var app = angular.module('custom', []);
app.directive('customTimer', function($http){
return function(scope, element, attrs){
alert(JSON.stringify({
date: scope.date,
other.scope.other
}, null, 2));
};
});
function basicController($scope){
$scope.date = new Date().toString();
$scope.other = 'OtherData';
}
<body ng-controller="basicController">
<h1 custom-timer="model" custom-data="CustomData" data-other="OtherData"></h1>
</body>
element - 태그 자체를 의미
element는 사용자 정의 속성을 지정한 태그를 나타냅니다.
자바스크립트에서 기본적으로 제공하는 문서 객체가 아닙니다.
element 메서드()
addClass(), after(), append(), attr(), bind(), children(), clone(), contents(), css(), data(),
eq(), find(), hasClass(), html(), next(), parent(), prepend(), prop(),
ready() - 문서 객체에 ready 이벤트를 연결합니다.
remove(), removeAttr(), removeClass(), removeData(), replaceWith(), text(), toggleClass(),
triggerHandler() - 문서 객체에 특정한 이벤트를 강제로 발생시킵니다.
unbind(), val(),
wrap() - 문서 객체를 감싸는 문서 객체를 생성합니다.
예)
app.directive('customTimer, function($http){
return function(scope, element, attrs){
element.html(new Data().toString());
element.bind('click', function(){
element.html(new Data().toString());
});
};
});
function basicController($scope, $timout){
// $timeout(fn, [delay], [invokeApply]);
$scope.date = new Date().toString();
$scope.other = 'OtherData';
$timeout(call = function(){
$timeout(call , 1000);
}, 1000);
}
attrs - 태그의 속성을 의미
'Angular.js' 카테고리의 다른 글
| Angular 바인딩/ 팩토리 (0) | 2014.09.15 |
|---|---|
| angular example (0) | 2014.09.15 |
| Angular 서비스 (0) | 2014.09.15 |
| Angular 페이지 라우트 (0) | 2014.09.15 |
| Angular ng 속성 (0) | 2014.09.12 |
HTMLPage.html
