MOC DYREKTYWNG­POZNAN 12.06.2014

Kamil Augustynowicz / @AugKamil

CO WAS CZEKA?Jak zadeklarować dyrektywę

Scope i przekazywanie parametrówGdzie wrzucić logikę

Gotowe dyrektywy w AngularJS

<div class="col-sm-12"> <h3>"Powrót do Przyszłości"</h3> <div class="col-sm-12"> <span>Ocena:</span> 3 </div> <div class="col-sm-12"> <h4> Trailers: </h4> <div> <a href="/video1">Trailer 1</a> </div> </div> <div class="col-sm-12"> <h4> Recenzje: </h4> <div> <a href="/review1.html">Review 1</a> </div> </div></div>

CO ŁATWIEJ ZROZUMIEĆ?<div class="col-sm-12"> <movie-title></movie-title> <movie-rating></movie-rating> <movie-trailers></movie-trailers> <movie-reviews></movie-reviews></div>

DEFINICJA DYREKTYWYangular.module "movieApp", [].directive "movieTitle", -> restrict: String priority: Number terminal: Boolean template: String or Template Function: (tElement, tAttrs) -> ... templateUrl: String replace: Boolean or String scope: Boolean or Object transclude: Boolean controller: String or (scope, element, attrs, transclude, otherInjectables) -> ... controllerAs: String require: String link: (scope, iElement, iAttrs) -> ... compile: (tElement, tAttrs, transclude) -> ...

DYREKTYWA JAKO ELEMENTangular.module 'movieApp',[].directive 'movieTitle', -> restrict: "E" ...

<movie-title></movie-title>

DYREKTYWA JAKO ATRYBUTangular.module 'movieApp',[].directive 'movieTitle', -> restrict: "A" ...

<div movie-title=""></div>

DYREKTYWA JAKO KLASAangular.module 'movieApp',[].directive 'movieTitle', -> restrict: "C" ...

<div class="movie-title"></div>

DYREKTYWA JAKO KOMENTARZangular.module 'movieApp',[].directive 'movieTitle', -> restrict: "M" ...

<!--directive:movie-title-->

SCOPEmovie_app = angular.module 'movieApp',[]

movie_module.directive 'movieReview', -> restrict: "E" scope: {} template: '<input type="text" ng-model="review">'+ '<span>Twoja recenzja: {{review}}</span>'

<div ng-app="movieApp"> <div ng-controller="AppCtrl"> <movie-review></movie-review> <movie-review></movie-review> <movie-review></movie-review> </div></div>

SCOPEmovie_app = angular.module 'movieApp',[]

movie_app.controller "AppCtrl", ($scope) -> $scope.showInfo = (title) -> alert "Dodaj do ulubionych filmów: " + title

movie_app.directive 'movieTitle', -> restrict: "E" scope: title: "@" favoriteMovie: "&" template: '<div ng-click="favoriteMovie({title: title})">'+ '<h3>{{title}}</h3>'+ '</div>' ...

<div ng-app="movieApp"> <div ng-controller="AppCtrl"> <movie-title title="Powrót do przyszłości" favorite-movie="showInfo(title)"> </movie-title> </div></div>

SCOPEmovie_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>Twoja ocena: {{rate}}</div>'+ '<select ng-model="rate" ng-options="rate for rate in rates">'+ '</select></div>' ...

<div ng-app="movieApp"> <div ng-controller="AppCtrl"> <span>Ocena poza scopem: {{rate}}</span> <select ng-model="rate" ng-options="rate for rate in rates"></select> <movie-rating rate="rate" rates="rates"></movie-rating> </div></div>

LINK / CONTROLLERmovie_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) if newValue != "Rewelacyjny" alert "Czy jesteś pewien tej oceny?" ), true ...

REQUIREmovie_app = angular.module 'movieApp',[]

movie_app.directive 'movieHeading', -> require: ["̂title", "̂director"] link: (scope, element, attrs, ctrls) -> ctrls[0].showTitle("Powrót do Przyszłości") ctrls[1].showDirector("Robert Zemeckis") ...

TO TEŻ DYREKTYWY<div ng-app="movieApp"></div>

<div ng-controller="MovieController as movie"></div>

<div ng-include="movie.html"></div>

<div ng-repeat="movie in movies"> <h3>{{movie.title}}</h3> <div>{{movie.director}}</div></div>

<div ng-swith="" on="movie.title"> <span ng-switch-default="">Tytuł:</span> <span ng-switch-when="Powrót do przyszłości">Najlepszy tytuł filmu to: </span>{{movie.title}}</div>

<div ng-if="movie.year == 1955"> Last night, Darth Vader came down from planet Vulcan and told me that</div>

<div ng-show="movie.year == 1955"> if I didn't take Lorraine out that he'd melt my brain.</div>

{{movie.title}}

<input type="text" ng-model="movie.title"><!-- CSS: ng-valid, ng-invalid, ng-prisitne, ng-dirty -->

I TO TEŻng-hrefng-src

ng-disabledng-checkedng-readonlyng-selected

ng-classng-styleng-viewng-form

ng-submitng-selectng-cloak

GDZIE WYKORZYSTAĆ TĘ MOC?Aby połączyć z logiką

Jako opakowanie dla plugin-ów jQueryModyfikowanie elementów DOM

DRY

THE ENDkamil@briisk.co

Kamil Augustynowicz / @AugKamil