Директивы являются одной из ключевых возможностей Angular.JS.
Они позволяют разработчику описать поведение отдельных элементов и расширить синтаксис HTML.
В js коде директивы принято называть camelCase-ом ngApp, а в шаблонах писать их через тире ng-app
Заменяет стандартный html тег - якорь, т.к. в стандартном href является обязательным и стандартны перезагружает страницу.
<a ng-click="model.$save()">Save</a>
Форма FormController()
name - необязательный параметр
<form name="myForm"></form>
name - имя свойства, под которым элемент управления будет доступен в области видимости
ng-true-value
ng-false-value
<input
type="checkbox"
ng-model="value1">
<input
type="checkbox"
ng-model="value2"
ng-true-value="YES"
ng-false-value="NO">
name - имя свойства, под которым элемент управления будет доступен в области видимости
required
ng-minlength
ng-maxlength
<input
type="email"
name="input"
ng-model="text"
required>
name
min
max
required
ng-minlength
ng-maxlength
<input
type="number"
name="input"
ng-model="value"
min="0"
max="99"
required>
<input
type="radio"
ng-model="color"
value="red"> Red <br/>
<input
type="radio"
ng-model="color"
value="green"> Green <br/>
<input
type="radio"
ng-model="color"
value="blue"> Blue <br/>
name - имя свойства, под которым элемент управления будет доступен в области видимости
required
ng-minlength
ng-maxlength
<input
type="text"
name="userName"
ng-model="user.name"
required>
<input
type="text"
name="lastName"
ng-model="user.last"
ng-minlength="3"
ng-maxlength="10">
<input
type="text"
name="input"
ng-model="text"
ng-pattern="word"
required>
name - имя свойства, под которым элемент управления будет доступен в области видимости
required
ng-minlength
ng-maxlength
<input
type="url"
name="input"
ng-model="text"
required>
Главная директива приложения, задает область ангуляр приложения или создает область для модуля.
Можно указать дополнительный атрибут, название приложения.
создается инжектор(injector), который будет использоваться для dependency injection
инжектор создает root scope, что является контекстом для модели нашего приложения
AngularJS “компилирует” DOM начиная с ngApp.
<body ng-app></body>
<script type="text/javascript">
var app = angular.module('myApp', []);
</script>
<body ng-app='myApp'></body>
Связывание компонента с объектом из скоупа
Hello <span ng-bind="name"><span>
Создает привязку через свойство innerHTML.
Hello <span ng-bind-html-unsafe="name"><span>
Множественная привязка
<pre ng-bind-template="{{salutation}} {{name}}!"></pre>
Вызывает определенную функция, приизменении значения.
<input
type="checkbox"
ng-model="confirmed"
ng-change="change()"
id="ng-change-example1" />
<input
id="checkSlave"
type="checkbox"
ng-checked="master">
Задает новый класс элементу
<li ng-class="{'active':(currPath == 'main')}"></li>
<span ng-class="myVar">Sample Text</span>
Задает новый класс каждому четному элементу, используется совместно с ng-repeat
<li ng-repeat="name in names">
<span ng-class-odd="'odd'" ng-class-even="'even'">
{{name}}
</span>
</li>
Задает новый класс каждому нечетному элементу, используется совместно с ng-repeat
Обработчик клика по элементу
<button
ng-click="count = count + 1"
ng-init="count=0">
Предотвращение показа в браузере шаблона angular при загрузке приложения
<div
id="template1"
ng-cloak>{{ 'hello' }}</div>
Связывание элемента c контроллером
<script type="text/javascript">
angular
.module('myapp, []')
.controller('myController', function myController($scope){
...
})
.controller('myController', ['$scope', function myController($scope){
// для корректной минификации
...
}])
</script>
<div ng-controller='myController'>
{{ myValue }}
</div>
<script type="text/javascript">
angular
.module('myapp, []')
.controller('myController', MyCtrl);
// для корректной минификации
MyCtrl.$inject = ['$scope'];
function MyCtrl($scope){
});
</script>
<div ng-controller='myController'>
{{ myValue }}
</div>
Включает поддержку CSP
<html ng-csp>...</html>
Обработчик двойного клика по элементу
<button ng-dblclick="count = count + 1" ng-init="count=0">
Включает/выключает элемент
<button
ng-model="button"
ng-disabled="checked">Button</button>
Форма, позволяет создавать вложенные формы
Скрывает элемент
<span ng-hide="checked">I hide when you checkbox is checked?</span>
<a
id="link-1"
href
ng-click="value = 1">link 1</a> (link, don't reload)
<a
id="link-2"
href=""
ng-click="value = 2">link 2</a> (link, don't reload)
<a
id="link-3"
ng-href="/{{'123'}}">link 3</a> (link, reload!)
<a
id="link-4"
href=""
name="xx"
ng-click="value = 4">anchor</a> (link, don't reload)
<a
id="link-5"
name="xxx"
ng-click="value = 5">anchor</a> (no link)
<a
id="link-6"
ng-href="{{value}}">link</a> (link, change location)
Подключает отдельный файлы
src
onload - выполнится, когда новая часть будет загружена
autoscroll - прокрутка отображения к загруженному контенту
<div
ng-include='/index.html'
onload=""
autoscroll=""></div>
Директива, инициализация начальных данных
<div ng-init="name='world'">
Hello {{ name }}
</div>
Конвертирует входной текст, разделенный заданным знаком разделителем, в массив строк
<input name="namesInput" ng-model="names" ng-list required>
Задает модель для связывания
Обработчик события mousedown, нажата кнопка мыши
Обработчик события mouseenter, курсов вошел в область
Обработчик события mouseleave, курсов вышел из области
Обработчик события mousemove, перемещение мыши в элементе
Обработчик события mouseover, мышь сверху
Обработчик события mouseup
<select id="select" ng-multiple="checked">
Не интерпретировать фреймворку содержимое элемента
<div ng-non-bindable>Ignored: {{1 + 2}}</div>
Локализация
count - значение
offset
one - первый элемент
other - другой элемент
<ng-pluralize
count="personCount"
when="{'0': 'Nobody is viewing.',
'one': '1 person is viewing.',
'other': '{} people are viewing.'}">
</ng-pluralize>
<ng-pluralize
count="personCount"
offset=2
when="{'0': 'Nobody is viewing.',
'1': '{{person1}} is viewing.',
'2': '{{person1}} and {{person2}} are viewing.',
'one': '{{person1}}, {{person2}} and one other person are viewing.',
'other': '{{person1}}, {{person2}} and {} other people are viewing.'}">
</ng-pluralize>
<input type="text" ng-readonly="checked" value="I'm Angular"/>
Цикл перебора массива
$index - номер текущей итерации
$first - первая итерация
$middle - не первая и не последняя итерация
$last - полседняя итерация
<ul>
<li ng-repeat="phone in phones">
{{$index}}. {{phone.name}}
</li>
</ul>
<option id="greet" ng-selected="selected">Greetings!</option>
Показывает/скрывает html элемент, в зависимости от результата выражения
<!-- когда $scope.myValue истина, элемент отображается -->
<div ng-show="myValue"></div>
<input type='checkbox' ng-model='ShowValue'>
<div ng-show='ShowValue'>текст, который отобразится при клике по checkbox</div>
<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>
Задает стили в зависимости от условии
<span ng-style="myStyle">Sample Text</span>
Позволяет забиндить действие, которое будет выполняться при отправке данных из формы.
<form ng-submit="submit()" ng-controller="Ctrl">
</form>
<div ng-switch on="selection" >
<div ng-switch-when="settings">Settings Div</div>
<span ng-switch-when="home">Home Span</span>
<span ng-switch-default>default</span>
</div>
Вставляет содержимое dom элемента в месте применения директивы
Используется внутри кастомных директив для вывода контета заданого снаржу при объявлении директивы
Отображение шаблона для текущего пути.
<div ng-view></div>
<script type="text/ng-template" id="/tpl.html">
Content of the template.
</script>
name
required
/* когда источник данных - массив:
* label for value in array
* select as label for value in array
* label group by group for value in array
* select as label group by group for value in array
*
* когда источник данных - объект:
* label for (key , value) in object
* select as label for (key , value) in object
* label group by group for (key, value) in object
* select as label group by group for (key, value) in object
*/
<select
ng-model="color"
ng-options="c.name for c in colors"></select>
<select
ng-model="color"
ng-options="c.name group by c.shade for c in colors"></select>
name - имя свойства, под которым элемент управления будет доступен в области видимости
required
ng-minlength
ng-maxlength