CSS değiştirilebilir
Veri validate edilir
Data Binding sağlanır
DOM manipülasyonları yapılır
Event’lar idare edilir
Tekrar kullanılabilirliği sağlar
Directive’ler return içerisine yerleştirilecek nesneler ile davranışlarını belirlerler.
Nesneler
- Restrict
- Template
- TemplateURL
- Link
- Replace
- Scope
- Transclude
Link
Directive’ler ile DOM işlemleri yapmak için kullanılır.
Link property’si değer olarak bir fonksiyon alır ve 5 tane parametreye sahiptir.
Elements → Elemente erişim sağlar
Scope → Directive’in scope nesnesidir
Ctrl → Directive içinde controller oluşturulursa kullanılır
Attrs → Directive’in attribute olarak tanımladığı elementin diğer attribute’larına erişim sağlar
TransludeFN → Translude işlemi için gereklidir
Controller’daki işlerin çoğunu üstlenir demiştik örnekle görelim.
Link property’si değer olarak bir fonksiyon alır ve 5 tane parametreye sahiptir.
Elements → Elemente erişim sağlar
Scope → Directive’in scope nesnesidir
Ctrl → Directive içinde controller oluşturulursa kullanılır
Attrs → Directive’in attribute olarak tanımladığı elementin diğer attribute’larına erişim sağlar
TransludeFN → Translude işlemi için gereklidir
Controller’daki işlerin çoğunu üstlenir demiştik örnekle görelim.
script
app.directive('myDirective',
function
() {
return
{
link: function
($scope,
element, attrs)
{
element.bind('click',
function
() {
element.html('You
clicked
me!');
});
element.bind('mouseenter',
function
() {
element.css('background-color',
'yellow');
});
element.bind('mouseleave',
function
() {
element.css('background-color',
'white');
});
}
};
});
html
<my-directive>Click Me</my-directive>
TemplateUrl
Template kaynağını url olarak verebildiğimiz property’lerdir
script.js
angular.module('myApp',
[])
.directive('myDirective',
function
() {
return
{
restrict:
'AE',
templateUrl:
"page.html"
}
});
index.html
<div my-directive></div>
page.html
<p>Bir yer var,
biliyorum</p>
Transclude
script.js
angular.module('myApp',
[])
.directive('myDirective',
function
() {
return
{
restrict:
‘AE’,
transclude:
true,
template:
'<p><h2>Directive Transclude</h2></p>'
}
});
html
<div my-directive>
<ul>
<li>
Lorem
ipsum
dolor.
</li>
</ul>
</div>
Scope
Directive’ler varsayılan olarak kendi scope’larını oluşturmazlar.
Bu nedenle tek kutuda yapılan değişiklik diğer kutulara ve expressionlara da yansır.
Bir scope yapısı kullanılması gerek.
Bu nedenle tek kutuda yapılan değişiklik diğer kutulara ve expressionlara da yansır.
Bir scope yapısı kullanılması gerek.
script.js
angular.module('myApp',
[])
.directive('myDirective',
function
() {
return
{
template:
'<p><input
type="text"
ng-model="name",
placeholder="İsim
yazınız" /></p> <h2>{{name}}</h2>'
}
});
index.html
<div my-directive></div>
<div my-directive></div>
<div my-directive></div>
NOT: scope: true ekleyerek kendi child scope’unu oluşturuyoruz.
script.js
angular.module('myApp',
[])
.directive('myDirective',
function
() {
return
{
scope:
true,
template:
'<p><input
type="text"
ng-model="name",
placeholder="İsim
yazınız" /></p> <h2>{{name}}</h2>'
}
});
index.html
<div my-directive></div>
<div my-directive></div>
<div my-directive></div>
Hiç yorum yok:
Yorum Gönder