Repozytorium Web Developera

Archiwum z lat 2013-2018, treści mogą być nieaktualne.

Angular - dyrektywy

Dyrektywy własne - tworzenie

Przydatne linki

Przykład


<body ng-app="MyApp">
    <my-widget/>
</body>

var app = angular.module("MyApp", []);

app.directive("myWidget", function() {
    return {
        restrict: "E",
        template: "<p>Hello World</p>"
    };
});

Dyrektywy wbudowane

Wykonywanie dyrektyw

Właściwość priority

W sytuacji, gdy wiele dyrektyw przypisanych jest do jednego elementu DOM, czasem konieczne jest określenie kolejności, w jakiej zostaną one wykonane. Do tego celu wykorzystywany jest priorytet, np. priority:0 .

Właściwość terminal

Kolejnym elementem, z którym należy się zapoznać, jest terminal przyjmujący wartość true lub false . Właściwość ta ustawiona na true powoduje zatrzymanie wykonywania dyrektyw znajdujących się w tym samym elemencie i posiadających niższy priorytet.

Dyrektywy tworzące

Dyrektywa ng-controller

Dyrektywa ng-controller należy do grupy tzw. tworzących dyrektyw. Za każdym razem, gdy Angular napotyka jedną z takich dyrektyw, zostaje utworzona nowa instancja scope , dlatego wcześniejsza deklaracja w kontrolerze nie jest wymagana.

Dyrektywa ng-repeat

ng-repeat pozwala nam iterować po dowolnej kolekcji obiektów, dodatkowo tworzy osobne elementy szablonu DOM dla każdego z elementów kolekcji.

Dyrektywa ng-bind-html

Jest to rozszerzenie ng-bind umożliwiające wiązanie HTML.

Konieczne jest załączenie dodatkowej biblioteki sanitize:


<script src="js/angular-sanitize.js"></script>

var app = angular.module("app", ['ngSanitize'])

Dyrektywa ng-bind-template

Podstawowa dyrektywa ng-bind pozwala wiązać jedynie w znaczniku span. ng-bind-template służy do wiązania w przypadku elementów, które nie mogą zawierać w sobie znacznika span, np. title czy option.


<pre ng-bind-template="{{tempText}} – {{name}}! Może też zawierać znaki specjalne (!@#$%^&*)_+)"></pre>

Dyrektywa ng-template

Przykład użycia:


<p>Select page content template via dropdown</p>
 <select ng-model="template">
   <option value="page1">Page 1</option>
   <option value="page2">Page 2</option>
 </select>

 <p>Set page content template via button click</p>
 <button ng-click="template='page2'">Show Page 2 Content</button>

 <ng-include src="template"></ng-include>

 <script type="text/ng-template" id="page1">
   <h1 style="color: blue;">This is the page 1 content</h1>
 </script>

 <script type="text/ng-template" id="page2">
   <h1 style="color:green;">This is the page 2 content</h1>
 </script>

Dyrektywy manipulacji

Dyrektywy ng-show oraz ng-hide

Dyrektywy ng-show oraz ng-hide służą do określania widoczności elementu. Przykładowo, dla poniższego kodu znacznik div wyświetli się, gdy w $scope.user będzie znajdowała się wartość różna od NULL.


<div ng-include="'userView.html'" ng-show="user">
    //body of div...
</div>