На мой взгляд, директивы являются основной изюминкой декларативного стиля Angularjs. Однако, если открыть комментарии пользователей в разделе официальной документации Angularjs, посвященной директивам, то вы увидите, что самый популярный из них: «Пожалуйста, перепишите документацию, сделайте ее более доступной и структурированной. Начинающему разработчику на Angularjs сложно в ней разобраться» («Please rewrite a clearer well structured documentation of directives., this is not friendly to first time angular developers»). С этим трудно не согласится, документация пока еще сыровата и в некоторых моментах приходится прилагать большие усилия, чтобы разобраться в логике и сути функционала. Поэтому я предлагаю вам свой вольный пересказ данной главы в надежде, что кому-то это позволит сэкономить время, а так же рассчитываю на вашу поддержку и участие в комментариях. Итак, поехали!
Часть 1
- Как писать директивы?
- Простой вариант создания директивы
- Развернутый вариант
- Link и Compile
Template и TemplateUrl
Продолжая разговор о директивах, надо отметить, что директивы по сути являются модулями, если абстрагироваться от терминологии Angularjs. То есть, в идеале, они должны быть самостоятельным элементом интерфейса со своими функционалом и разметкой. Разметка при этом может задаваться напрямую в параметре Template или храниться в отдельном файле, URL которого указывается в TemplateUrl:
[jsFiddle]
angular.module('helloHabrahabr', [])
.directive('habraHabr', function() {
return {
template:"<span>Hello Habr!</span>"
/* или */
templateUrl:"helloHabr.html"
}
});
helloHabr.html
<span>Hello Habr!</span>
При этом в случае, если шаблон подгружается, функции Compile и Link выполняются после загрузки.
Scope
Параметр Scope определяет область видимости внутри директивы. Возможно несколько вариантов:
Не указывать scope вовсе. Тогда директива, грубо говоря, работает напрямую в области видимости контроллера. То есть все переменные контроллера равны переменным директивы.
[jsFiddle]
<div ng-app="helloHabrahabr">
<div ng-controller="forExampleController">
{{hello}}
<span habra-habr></span>
</div>
</div>
function forExampleController($scope){
$scope.hello="Hello Habr!";
}
angular.module('helloHabrahabr', [])
.directive('habraHabr', function() {
return {
template:"<input ng-model='hello'>{{hello}}"
}
});
Другой вариант. Scope = true. В этом случае, scope будет наследоваться. То есть поля, заданные в родительском scope будут отображаться и в scope директивы, но при этом все изменения будут локальны:
[jsFiddle]
function forExampleController($scope){
$scope.hello="Hello Habr!";
}
angular.module('helloHabrahabr', [])
.directive('habraHabr', function() {
return {
template:"<input ng-model='hello'>{{hello}}",
scope:true
}
});
И наконец, самый интересный вариант. Задать изолированный scope. То есть scope, который по умолчанию абсолютно независим от контекста вызова директивы. Для этого нужно просто указать в качестве scope пустой объект {}:
[jsFiddle]
angular.module('helloHabrahabr', [])
.directive('habraHabr', function() {
return {
template:"<input ng-model='hello'>{{hello}}",
scope:{
}
}
});
Дальше есть несколько вариантов работы с таким изолированным scope. Но все они сводятся к одному принципу. В объекте, который мы объявили для scope, в качестве имени свойства слева указывается некая переменная директивы, а справа название атрибута DOM c одним из трех символов в начале: @/=/&. То есть вот так:
scope:{
localVar1:"@attrName1",
localVar2:"=attrName2",
localVar3:"&attrName3"
}
Либо еще одни вариант. Не указывать имя атрибута, тогда оно будет равно имени переменной:
scope:{
localVar1:"@", /*localVar1:"@localVar1" */
localVar2:"=", /*localVar2:"@localVar2" */
localVar3:"&" /*localVar3:"@localVar3" */
}
Теперь по порядку. Префикс "@" означает, что локальной переменной будет присвоено значение атрибута:
[jsFiddle]
<div ng-app="helloHabrahabr">
<span habra-habr="hello" some-attr="Hello Habr!"></span>
</div>
angular.module('helloHabrahabr', [])
.directive('habraHabr', function() {
return {
template:"{{hello}}",
scope:{
hello:'@someAttr'
}
}
});
Префикс "=" означает, что в атрибуте передается уже не строчка, а имя некоторой переменной в текущем Scope. И локальная переменная будет напрямую с ней связана. То есть изменения переменной как внутри директивы, так и вне отразятся и там, и там:
[jsFiddle]
<div ng-app="helloHabrahabr">
<div ng-controller="forExampleController">
{{hello}}
<span habra-habr some-attr="hello"></span>
</div>
</div>
function forExampleController($scope){
$scope.hello="Hello Habr!";
}
angular.module('helloHabrahabr', [])
.directive('habraHabr', function() {
return {
template:"<input ng-model='hello'>{{hello}}",
scope:{
hello:'=someAttr'
}
}
});
И наконец, последний вариант "&" предполагает, что атрибут содержит некое выражение. К примеру, «c= a+b» или проще «a+b». И теперь ваша локальная переменная становится функцией, в которую можно передавать параметры. Параметры передаются в объекте, ключами которого выступают имена переменных в функции. В конкретном случае, localVar({a:1,b:2}) вернет три.
[jsFiddle]
angular.module('helloHabrahabr', [])
.directive('habraHabr', function() {
return {
template:"{{helloFn({a:1,b:2})}}",
scope:{
helloFn:'&someAttr'
}
}
});
При этом интересно, что по умолчанию, если не передавать в локальную функцию никаких параметров, переменным будут присвоены значения соответствующих переменных в родительском scope. А если указать переменную -результат, то и она также будет доступна из вне:
[jsFiddle]
<div ng-app="helloHabrahabr">
<div ng-controller="forExampleController">
a={{a}}
b={{b}}
parent's hello={{hello}}
<span habra-habr some-attr="hello= a+b"></span>
</div>
</div>
function forExampleController($scope){
$scope.a="Hello";
$scope.b=" Habr!";
}
angular.module('helloHabrahabr', [])
.directive('habraHabr', function() {
return {
template:"default helloFn={{helloFn()}}
custom hello={{helloFn({a:'Bye',b:'Habr'})}}",
scope:{
helloFn:'&someAttr'
}
}
});
Всем спасибо, продолжение следует.
Автор: durovchpoknet
