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Функция link - это то, где post link является последней функцией, которая будет выполнена. Теперь 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
}
}
});