directive позволяет вам декларативно расширить словарный запас HTML для создания веб-компонентов. Атрибут ng-app является директивой, так же как ng-controller и все ng- prefixed attributes. Директивы могут быть attributes, tags или даже class names, comments.
Как рождаются директивы (compilation и instantiation)
Компиляция: мы будем использовать функцию compile как для manipulate DOM перед ее визуализацией, так и для возврата функции link (которая будет выполнять связывание за нас). Здесь также можно разместить любые методы, которые необходимо использовать совместно со всеми instances этой директивы.
link: мы будем использовать функцию 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.
controller: Директива controller может быть передана на этап компоновки / компиляции другой директивы. Его можно вводить в другие директивы как средство для использования в междирективном общении.
Вы должны указать имя требуемой директивы - она должна быть привязана к тому же элементу или его родительскому элементу. К имени можно добавить префикс:
? – 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
}
}
});
person
Thalaivar
schedule
29.09.2015
