directive
1. restrict
A 엘리먼트
E 속성
C 클래스
2. template or templateUrl
실제로 들어가게 되는 div
3. 특징
- directive는 새로운 scope를 생성할 수 없다
- scope를 부모로 부터 상속을 받는다
-
app.directive('helloWorld', function() {
return {
restrict: 'AE',
replace: true,
template: '<p style="background-color:{{color}}">Hello World',
link: function(scope, elem, attrs) {
elem.bind('click', function() {
elem.css('background-color', 'white');
scope.$apply(function() {
scope.color = "white";
});
});
elem.bind('mouseover', function() {
elem.css('cursor', 'pointer');
});
}
};
});
4. link fuction
- link에는 3개의 변수가 들어간다
- scope는 parent 스코프
5. scope의 종류는 두가지가 있다
- A child scope -> scope:true
- An isolated scope -> scope:{}
childe scope 는 부모로부터 scope를 상속받는다
isolated scope 는 개별적으로 하나를 생성한다.
isolated scope는 부모의 scope를 사용할 수 없는것이 아니다.
6. @ 사용하기 (데이터 바인딩용)
- @ for One Way Text Binding
- 상위 컨트롤러의 color가 바뀌면 하위의 내용도 따로 바뀐다.
app.directive('helloWorld', function() {
return {
scope: {
color: '@colorAttr'
},
....
// the rest of the configurations
};
});
<body ng-controller="MainCtrl">
<input type="text" ng-model="color" placeholder="Enter a color"/>
<hello-world color-attr="{{color}}"/>
</body>
7. = 사용하기 (데이터 바인딩용)
= for Two Way Binding
app.directive('helloWorld', function() {
return {
scope: {
color: '='
},
....
// the rest of the configurations
};
});
8. & to Execute Functions in the Parent Scope
app.directive('sayHello', function() {
return {
scope: {
sayHelloIsolated: '&'
},
....
// the rest of the configurations
};
});
<body ng-controller="MainCtrl">
<input type="text" ng-model="color" placeholder="Enter a color"/>
<say-hello sayHelloIsolated="sayHello()"/>
</body>
9. Parent Scope vs. Child Scope vs. Isolated Scope
Parent Scope : scope:fasle default
childe scope : scope:true inherit parent scope
isolated scope :
10. The controller Function and require
app.directive('outerDirective', function() {
return {
scope: {},
restrict: 'AE',
controller: function($scope, $compile, $http) {
// $scope is the appropriate scope for the directive
this.addChild = function(nestedDirective) { // this refers to the controller
console.log('Got the message from nested directive:' + nestedDirective.message);
};
}
};
});
4번째 변수는 require 한 컨트롤러가 삽입된다.
app.directive('innerDirective', function() {
return {
scope: {},
restrict: 'AE',
require: '^outerDirective',
link: function(scope, elem, attrs, controllerInstance) {
//the fourth argument is the controller instance you require
scope.message = "Hi, Parent directive";
controllerInstance.addChild(scope);
}
};
});
reference site : http://www.sitepoint.com/practical-guide-angularjs-directives-part-two/
