Стандартные директивы¶

Директивы являются одной из ключевых возможностей Angular.JS.

Они позволяют разработчику описать поведение отдельных элементов и расширить синтаксис HTML.

В js коде директивы принято называть camelCase-ом ngApp, а в шаблонах писать их через тире ng-app

a¶

Заменяет стандартный html тег - якорь, т.к. в стандартном href является обязательным и стандартны перезагружает страницу.

<a ng-click="model.$save()">Save</a>

form¶

Форма FormController()

name - необязательный параметр

<form name="myForm"></form>

input[checkbox]¶

ng-model
name - имя свойства, под которым элемент управления будет доступен в области видимости
ng-true-value
ng-false-value
ng-change

<input
    type="checkbox"
    ng-model="value1">

<input
    type="checkbox"
    ng-model="value2"
    ng-true-value="YES"
    ng-false-value="NO">

input[email]¶

ng-model
name - имя свойства, под которым элемент управления будет доступен в области видимости
required
ng-required
ng-minlength
ng-maxlength
ng-pattern

<input
    type="email"
    name="input"
    ng-model="text"
    required>

input[number]¶

ng-model
name
min
max
required
ng-required
ng-minlength
ng-maxlength
ng-pattern
ng-change

<input
    type="number"
    name="input"
    ng-model="value"
    min="0"
    max="99"
    required>

input[radio]¶

ng-model
value
name
ng-change

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

input[text]¶

ng-model
name - имя свойства, под которым элемент управления будет доступен в области видимости
required
ng-required
ng-minlength
ng-maxlength
ng-pattern
ng-change

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

input[url]¶

ng-model
name - имя свойства, под которым элемент управления будет доступен в области видимости
required
ng-required
ng-minlength
ng-maxlength
ng-pattern
ng-change

<input
    type="url"
    name="input"
    ng-model="text"
    required>

ng-app¶

Главная директива приложения, задает область ангуляр приложения или создает область для модуля.

Можно указать дополнительный атрибут, название приложения.

создается инжектор(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>

ng-bind¶

Связывание компонента с объектом из скоупа

Hello <span ng-bind="name"><span>

ng-bind-html-unsafe¶

Создает привязку через свойство innerHTML.

Hello <span ng-bind-html-unsafe="name"><span>

ng-bind-template¶

Множественная привязка

<pre ng-bind-template="{{salutation}} {{name}}!"></pre>

ng-change¶

Вызывает определенную функция, приизменении значения.

<input
    type="checkbox"
    ng-model="confirmed"
    ng-change="change()"
    id="ng-change-example1" />

ng-checked¶

<input
    id="checkSlave"
    type="checkbox"
    ng-checked="master">

ng-class¶

Задает новый класс элементу

<li ng-class="{'active':(currPath == 'main')}"></li>

<span ng-class="myVar">Sample Text</span>

ng-class-even¶

Задает новый класс каждому четному элементу, используется совместно с ng-repeat

<li ng-repeat="name in names">
    <span ng-class-odd="'odd'" ng-class-even="'even'">
        {{name}}
    </span>
</li>

ng-class-odd¶

Задает новый класс каждому нечетному элементу, используется совместно с ng-repeat

ng-click¶

Обработчик клика по элементу

<button
    ng-click="count = count + 1"
    ng-init="count=0">

ng-cloak¶

Предотвращение показа в браузере шаблона angular при загрузке приложения

<div
    id="template1"
    ng-cloak>{{ 'hello' }}</div>

ng-controller¶

Связывание элемента 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>

ng-csp¶

Включает поддержку CSP

<html ng-csp>...</html>

ng-dblclick¶

Обработчик двойного клика по элементу

<button ng-dblclick="count = count + 1" ng-init="count=0">

ng-disabled¶

Включает/выключает элемент

<button
    ng-model="button"
    ng-disabled="checked">Button</button>

ng-form¶

Форма, позволяет создавать вложенные формы

ng-hide¶

Скрывает элемент

<span ng-hide="checked">I hide when you checkbox is checked?</span>

ng-href¶

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

ng-include¶

Подключает отдельный файлы

src
onload - выполнится, когда новая часть будет загружена
autoscroll - прокрутка отображения к загруженному контенту

<div
    ng-include='/index.html'
    onload=""
    autoscroll=""></div>

ng-init¶

Директива, инициализация начальных данных

<div ng-init="name='world'">
    Hello {{ name }}
</div>

ng-list¶

Конвертирует входной текст, разделенный заданным знаком разделителем, в массив строк

<input name="namesInput" ng-model="names" ng-list required>

ng-model¶

Задает модель для связывания

ng-mousedown¶

Обработчик события mousedown, нажата кнопка мыши

ng-mouseenter¶

Обработчик события mouseenter, курсов вошел в область

ng-mouseleave¶

Обработчик события mouseleave, курсов вышел из области

ng-mousemove¶

Обработчик события mousemove, перемещение мыши в элементе

ng-mouseover¶

Обработчик события mouseover, мышь сверху

ng-mouseup¶

Обработчик события mouseup

ng-multiple¶

<select id="select" ng-multiple="checked">

ng-non-bindable¶

Не интерпретировать фреймворку содержимое элемента

<div ng-non-bindable>Ignored: {{1 + 2}}</div>

ng-options¶

ng-pattern¶

ng-pluralize¶

Локализация

count - значение
offset
when - карта значений
- 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>

ng-readonly¶

<input type="text" ng-readonly="checked" value="I'm Angular"/>

ng-repeat¶

Цикл перебора массива

$index - номер текущей итерации
$first - первая итерация
$middle - не первая и не последняя итерация
$last - полседняя итерация

<ul>
    <li ng-repeat="phone in phones">
        {{$index}}. {{phone.name}}
    </li>
</ul>

ng-required¶

ng-selected¶

<option id="greet" ng-selected="selected">Greetings!</option>

ng-show¶

Показывает/скрывает html элемент, в зависимости от результата выражения

<!-- когда $scope.myValue истина, элемент отображается -->
<div ng-show="myValue"></div>

<input type='checkbox' ng-model='ShowValue'>
<div ng-show='ShowValue'>текст, который отобразится при клике по checkbox</div>

ng-src¶

<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>

ng-style¶

Задает стили в зависимости от условии

<span ng-style="myStyle">Sample Text</span>

ng-submit¶

Позволяет забиндить действие, которое будет выполняться при отправке данных из формы.

<form ng-submit="submit()" ng-controller="Ctrl">
</form>

ng-switch¶

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

ng-transclude¶

Вставляет содержимое dom элемента в месте применения директивы

Используется внутри кастомных директив для вывода контета заданого снаржу при объявлении директивы

ng-view¶

Отображение шаблона для текущего пути.

<div ng-view></div>

script[type=’text/ng-template’]¶

<script type="text/ng-template" id="/tpl.html">
    Content of the template.
</script>

select¶

ng-model
name
required
ng-required
ng-options

/* когда источник данных - массив:
 * 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>

textarea¶

ng-model
name - имя свойства, под которым элемент управления будет доступен в области видимости
required
ng-required
ng-minlength
ng-maxlength
ng-pattern
ng-change