A directivememungkinkan Anda untuk memperluas kosakata HTML secara deklaratif untuk membangun komponen web. The ng-appatribut direktif, jadi adalah ng-controllerdan semua ng- prefixed attributes. Arahan dapat attributes, tagsatau bahkan class names, comments.
Bagaimana arahan dilahirkan ( compilationdan instantiation)
Kompilasi: Kami akan menggunakan compilefungsi untuk kedua manipulateDOM sebelum diberikan dan mengembalikan linkfungsi (yang akan menangani tautan untuk kami). Ini juga tempat untuk meletakkan metode apa pun yang perlu dibagikan dengan semua instancesarahan ini.
tautan: Kami akan menggunakan linkfungsi ini untuk mendaftarkan semua pendengar pada elemen DOM tertentu (yang dikloning dari templat) dan mengatur ikatan kami ke halaman.
Jika diatur dalam compile()fungsi mereka hanya akan ditetapkan sekali (yang sering Anda inginkan). Jika diatur dalam link()fungsi mereka akan disetel setiap kali elemen HTML terikat ke data dalam
objek.
<div ng-repeat="i in [0,1,2]">
<simple>
<div>Inner content</div>
</simple>
</div>
app.directive("simple", function(){
return {
restrict: "EA",
transclude:true,
template:"<div>{{label}}<div ng-transclude></div></div>",
compile: function(element, attributes){
return {
pre: function(scope, element, attributes, controller, transcludeFn){
},
post: function(scope, element, attributes, controller, transcludeFn){
}
}
},
controller: function($scope){
}
};
});
Compilefungsi mengembalikan fungsi predan posttautan. Dalam fungsi pra tautan kami memiliki template contoh dan juga cakupan dari controller, tetapi template tersebut tidak terikat pada cakupan dan masih belum memiliki konten yang ditransklusikan.
Postfungsi tautan adalah tempat tautan pos adalah fungsi terakhir yang dijalankan. Sekarang transclusionselesai the template is linked to a scope,, dan view will update with data bound values after the next digest cycle. The linkpilihan adalah hanya jalan pintas untuk membuat sebuah post-linkfungsi.
controller: Controller directive dapat diteruskan ke fase penghubungan / kompilasi directive lainnya. Ini dapat disuntikkan ke arahan lain sebagai sarana untuk digunakan dalam komunikasi antar-direktif.
Anda harus menentukan nama arahan yang diperlukan - Ini harus terikat ke elemen yang sama atau induknya. Nama dapat diawali dengan:
? – Will not raise any error if a mentioned directive does not exist.
^ – Will look for the directive on parent elements, if not available on the same element.
Gunakan braket persegi [‘directive1′, ‘directive2′, ‘directive3′]untuk memerlukan beberapa arahan pengontrol.
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $element) {
});
app.directive('parentDirective', function() {
return {
restrict: 'E',
template: '<child-directive></child-directive>',
controller: function($scope, $element){
this.variable = "Hi Vinothbabu"
}
}
});
app.directive('childDirective', function() {
return {
restrict: 'E',
template: '<h1>I am child</h1>',
replace: true,
require: '^parentDirective',
link: function($scope, $element, attr, parentDirectCtrl){
//you now have access to parentDirectCtrl.variable
}
}
});