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
<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>