A directiveдозволяє розширювати словниковий запас HTML декларативно для створення веб-компонентів. ng-appАтрибут є директивою, так ng-controllerі все ng- prefixed attributes. Директиви можуть бути attributes, tagsабо навіть class names, comments.
Як народжуються директиви ( compilationі instantiation)
Компілюйте: ми будемо використовувати цю compileфункцію як manipulateдля DOM, перш ніж вона буде надана, і повернемо linkфункцію (яка буде обробляти зв'язок для нас). Це також місце, щоб застосувати будь-які методи, якими потрібно ділитися з усіма instancesположеннями цієї Директиви.
посилання: ми скористаємось linkфункцією для реєстрації всіх слухачів певного елемента DOM (це клоновано з шаблону) та налаштування наших прив’язок до сторінки.
Якби їх було встановлено у compile()функції, вони були б встановлені лише один раз (що часто ви хочете). Якщо їх встановити у link()функції, вони встановлюватимуться кожного разу, коли елемент HTML прив'язується до даних
об'єкта.
<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){
}
};
});
Compileфункція повертає функцію preта postзв'язок. У функції попереднього посилання у нас є шаблон екземпляра, а також область від controller, але, тим не менш, шаблон не пов'язаний з обсягом і все ще не містить зміщеного вмісту.
Postфункція посилання - це те, де пост-посилання є останньою функцією, яку потрібно виконати. Тепер transclusionзавершено the template is linked to a scope, і view will update with data bound values after the next digest cycle. Цей linkваріант є лише ярликом до налаштування post-linkфункції.
Контролер: Контролер директиви може бути переведений на іншу директиву, що зв'язує / збирає фазу. Її можна вводити в інші довідники як засіб для використання в міждирективній комунікації.
Ви повинні вказати ім'я необхідної директиви - Це повинно бути пов'язане з тим самим елементом або його батьківським елементом. Ім'я може мати префікс:
? – 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.
Використовуйте квадратну дужку, [‘directive1′, ‘directive2′, ‘directive3′]щоб вимагати контролера декількох директив.
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
}
}
});