Стандартные директивы¶
Директивы являются одной из ключевых возможностей Angular.JS.
Они позволяют разработчику описать поведение отдельных элементов и расширить синтаксис HTML.
В js коде директивы принято называть camelCase-ом ngApp, а в шаблонах писать их через тире ng-app
a¶
Заменяет стандартный html тег - якорь, т.к. в стандартном href является обязательным и стандартны перезагружает страницу.
<a ng-click="model.$save()">Save</a>
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]¶
<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-html-unsafe¶
Создает привязку через свойство innerHTML.
Hello <span ng-bind-html-unsafe="name"><span>
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-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-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-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-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 элемента в месте применения директивы
Используется внутри кастомных директив для вывода контета заданого снаржу при объявлении директивы
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