This document discusses AngularJS directives and how to use them. It explains what directives are in AngularJS and how to define them, including options like restrict, scope, template, and link functions. It provides examples of using directives to encapsulate logic and reuse HTML elements. Finally, it discusses how other AngularJS components like ng-repeat and ng-if are also directives, and when directives are useful to combine with logic, wrap jQuery plugins, or modify the DOM.

1. MOC DYREKTYW
NG­POZNAN 12.06.2014
Kamil Augustynowicz / @AugKamil

2. CO WAS CZEKA?
Jak zadeklarować dyrektywę
Scope i przekazywanie parametrów
Gdzie wrzucić logikę
Gotowe dyrektywy w AngularJS

3. <divclass="col-sm-12">
<h3>"PowrótdoPrzyszłości"</h3>
<divclass="col-sm-12">
<span>Ocena:</span>3
</div>
<divclass="col-sm-12">
<h4>
Trailers:
</h4>
<div>
<ahref="/video1">Trailer1</a>
</div>
</div>
<divclass="col-sm-12">
<h4>
Recenzje:
</h4>
<div>
<ahref="/review1.html">Review1</a>
</div>
</div>
</div>
CO ŁATWIEJ ZROZUMIEĆ?
<divclass="col-sm-12">
<movie-title></movie-title>
<movie-rating></movie-rating>
<movie-trailers></movie-trailers>
<movie-reviews></movie-reviews>
</div>

4. DEFINICJA DYREKTYWY
angular.module"movieApp",[]
.directive"movieTitle",->
restrict:String
priority:Number
terminal:Boolean
template:StringorTemplateFunction:
(tElement,tAttrs)->
...
templateUrl:String
replace:BooleanorString
scope:BooleanorObject
transclude:Boolean
controller:Stringor
(scope,element,attrs,transclude,otherInjectables)->
...
controllerAs:String
require:String
link:(scope,iElement,iAttrs)->
...
compile:
(tElement,tAttrs,transclude)->
...

5. DYREKTYWA JAKO ELEMENT
angular.module'movieApp',[]
.directive'movieTitle',->
restrict:"E"
...
<movie-title></movie-title>

6. DYREKTYWA JAKO ATRYBUT
angular.module'movieApp',[]
.directive'movieTitle',->
restrict:"A"
...
<divmovie-title=""></div>

7. DYREKTYWA JAKO KLASA
angular.module'movieApp',[]
.directive'movieTitle',->
restrict:"C"
...
<divclass="movie-title"></div>

8. DYREKTYWA JAKO KOMENTARZ
angular.module'movieApp',[]
.directive'movieTitle',->
restrict:"M"
...
<!--directive:movie-title-->

9. SCOPE
movie_app=angular.module'movieApp',[]
movie_module.directive'movieReview',->
restrict:"E"
scope:{}
template:
'<inputtype="text"ng-model="review">'+
'<span>Twojarecenzja:{{review}}</span>'
<divng-app="movieApp">
<divng-controller="AppCtrl">
<movie-review></movie-review>
<movie-review></movie-review>
<movie-review></movie-review>
</div>
</div>

10. SCOPE
movie_app=angular.module'movieApp',[]
movie_app.controller"AppCtrl",($scope)->
$scope.showInfo=(title)->
alert"Dodajdoulubionychfilmów:"+title
movie_app.directive'movieTitle',->
restrict:"E"
scope:
title:"@"
favoriteMovie:"&"
template:
'<divng-click="favoriteMovie({title:title})">'+
'<h3>{{title}}</h3>'+
'</div>'
...
<divng-app="movieApp">
<divng-controller="AppCtrl">
<movie-titletitle="Powrótdo
przyszłości"favorite-movie="showInfo(title)">
</movie-title>
</div>
</div>

11. SCOPE
movie_app=angular.module'movieApp',[]
movie_app.controller"AppCtrl",($scope)->
$scope.rates=["Tragedia","Słaby","Średni","Dobry","Rewelacyjny"]
movie_app.directive'movieRating',->
restrict:"E"
scope:
rate:"="
rates:"="
template:
'<div><div>Twojaocena:{{rate}}</div>'+
'<selectng-model="rate"ng-options="rateforrateinrates">'+
'</select></div>'
...
<divng-app="movieApp">
<divng-controller="AppCtrl">
<span>Ocenapozascopem:{{rate}}</span>
<selectng-model="rate"ng-options="rateforrateinrates"></select>
<movie-ratingrate="rate"rates="rates"></movie-rating>
</div>
</div>

12. LINK / CONTROLLER
movie_app=angular.module'movieApp',[]
movie_app.directive'movieRating',->
...
link:(scope,element,attrs,ctrls)->
element.bind'mouseover',->
element.css'color','red'
element.bind'mouseleave',->
element.css'color','black'
scope.$watch"rate",((newValue,oldValue)->
if!angular.equals(newValue,oldValue)
ifnewValue!="Rewelacyjny"
alert"Czyjesteśpewientejoceny?"
),true
...

13. REQUIRE
movie_app=angular.module'movieApp',[]
movie_app.directive'movieHeading',->
require:["^title","^director"]
link:(scope,element,attrs,ctrls)->
ctrls[0].showTitle("PowrótdoPrzyszłości")
ctrls[1].showDirector("RobertZemeckis")
...

14. TO TEŻ DYREKTYWY
<divng-app="movieApp"></div>
<divng-controller="MovieControllerasmovie"></div>
<divng-include="movie.html"></div>
<divng-repeat="movieinmovies">
<h3>{{movie.title}}</h3>
<div>{{movie.director}}</div>
</div>
<divng-swith=""on="movie.title">
<spanng-switch-default="">Tytuł:</span>
<spanng-switch-when="Powrótdoprzyszłości">Najlepszytytułfilmuto:
</span>{{movie.title}}
</div>
<divng-if="movie.year==1955">
Lastnight,DarthVadercamedownfromplanetVulcanandtoldmethat
</div>
<divng-show="movie.year==1955">
ifIdidn'ttakeLorraineoutthathe'dmeltmybrain.
</div>
{{movie.title}}
<inputtype="text"ng-model="movie.title">
<!--CSS:ng-valid,ng-invalid,ng-prisitne,ng-dirty-->

15. I TO TEŻ
ng-href
ng-src
ng-disabled
ng-checked
ng-readonly
ng-selected
ng-class
ng-style
ng-view
ng-form
ng-submit
ng-select
ng-cloak

16. GDZIE WYKORZYSTAĆ TĘ MOC?
Aby połączyć z logiką
Jako opakowanie dla plugin-ów jQuery
Modyfikowanie elementów DOM
DRY

17. THE END
kamil@briisk.co
Kamil Augustynowicz / @AugKamil