Proud to be an engineer !: [HTML|JS|CSS] AngularJS: Directives

Dyrektywy w Angularze są mechanizmem pozwalającym w prosty sposób tworzyć potężne mechanizmy, służące zarówno do definiowania zachowań, jak i manipulacji modelem DOM. Podczas procesu kompilacji dyrektywy są wyszukiwane w kodzie HTML i przetwarzane zgodnie ze zdefiniowaną w nich logiką. Angular JS umożliwia wprowadzenie czterech rodzajów własnych dyrektyw. Mogą one być umieszczane w:

nazwach elementów
klasach
atrybutach
komentarzach

Istnieje pewna konwencja, której należy przestrzegać: w kodzie html dyrektywy piszemy jako tzw. snake - names (to-jest-dyrektywa), natomiast w code behind w tzw. camel - case (toJestDyrektywa). Deklaracja dyrektyw w widoku może przebiegać w następujący sposób.

<!doctype html>
<html ng-app="directivesSample">
<head>
<meta charset="utf-8">
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
 <script src="scripts/myscript.js"></script>
</head>
<body> 
 <div class="my-first-directive"> </div>
 <my-second-directive></my-second-directive>
 <div my-third-directive></div>
 <!-- directive: my-fourth-directive exp -->
</body>
</html>

Aby AngularJS mógł odpowiednio zinterpretować dyrektywy zawarte w widoku, należy skonfigurować moduł aplikacji w code behind.

angular.module('directivesSample', []).
 directive('myFirstDirective', function(){
   return {
    restrict : 'C',
    template : "<div><button>First directive</button>"+
    "<label>{{myAttribute}} </label>" + 
    "<label>{{literal}} </label>" + 
    "<label>{{text}}</label>" + 
    "</div>",
    scope: { 
     myAttribute:'@myAttribute',
     literal : '=literal' 
    },
    controller : function($scope){
     console.log('controller first... ');
     $scope.text = "someText";
     $scope.literal += ' modified';
     console.log("=literal " + $scope.literal);
    }
  }
 })

W obiekcie konfigurującym mamy do dyspozycji szereg właściwości i funkcji, które możemy modyfikować. Poniżej omówione zostały niektóre z nich:

restrict

Informacja na temat tego, gdzie została umieszczona dyrektywa (C - w klasie, M - w komentarzu, A - w atrybucie, E - jako osobny element).

template

Zawiera kod HTML, który zostaje doklejony na końcu ciała elementu z dyrektywą. Można użyć property templateUrl z podaną ścieżką do osobnego pliku html z szablonem.

replace

Po ustawieniu na true dyrektywa zostanie zastąpiona szablonem (wymagane dla dyrektyw w komentarzach). Domyślnie wartość false, przez co szablon jest wstawiany do wnętrza dyrektywy

scope

true - tworzy nowy scope w obrębie dyrektywy, dziedziczy po parent scope
{} - nowy izolowany scope (brak bezpośredniego dostępu do properties z parent scope). Podczas tworzenia scope można pobierać atrybuty z elementu DOM na którym zastosowana jest dyrektywa (np. '@myAttribute', oraz dworzyć dwukierunkowy binding do właściwości z parent scope (np. '=literal'). Poniżej przykład:

<body ng-controller="myController"> 
 <div>{{literal}}</div>
 <div class="my-first-directive" literal="literal" my-attribute="myAttr"></div>
</body>

function myController($scope){
 console.log('creating outer Scope...');
 $scope.literal = 'outerScope';
}

angular.module('directivesSample', []).
 directive('myFirstDirective', function(){
   return {
    restrict : 'C',
    template : "<div><button>First directive</button>"+
    "<label>{{myAttribute}} </label>" + 
    "<label>{{literal}} </label>" + 
    "<label>{{text}}</label>" + 
    "</div>",
    scope: { 
     myAttribute:'@myAttribute',
     literal : '=literal' 
    },
    controller : function($scope){
     console.log('controller first... ');
     $scope.text = "someText";
     $scope.literal += ' modified';
     console.log("=literal " + $scope.literal);
    }
  }
 })

Wyliczany napis w pierwszym divie zostanie przez data binding zaktualizowany na "outerScope modified".

compile: function compile(tElement, tAttrs, scope)

Funkcja wywoływana podczas procesu kompilacji, na tym etapie transformuje się drzewo DOM, np. klonuje elementy za pomocą ng-repeat. Rzadko stosowana.

link: function(scope, element, attrs)

W tym miejscu następuje rejestracja event handlerów dla elementów modelu DOM.

link: function(scope, element, attrs) {
 $(element).bind('click',function(){
  alert('click');
 })
}

sobota, 6 października 2012

[HTML|JS|CSS] AngularJS: Directives

Brak komentarzy:

Prześlij komentarz

Szukaj na tym blogu