Директива, я понимаю это как способ для Angularjs манипулировать элементами HTML.
Поскольку первый шаг в обучении AngularJS состоит в том, чтобы написать встроенную инструкцию NG-APP, чтобы указать, что узел является корневым узлом приложения, инструкции уже знакомы.
Этот журнал просто записывает некоторые встроенные инструкции, сначала используйте его, а затем рассказывают о некоторых интересных вещах.
Встроенные команды
Все встроенные директивы имеют префиксы NG, и не рекомендуется использовать этот префикс для пользовательских директив, чтобы избежать конфликтов.
Начните с некоторых общих встроенных инструкций.
Во-первых, перечислите некоторые ключевые встроенные инструкции и кратко поговорите о вопросах масштаба.
нг-модель
Это объяснение кажется правильным при привязке управления формой с свойствами текущего объема.
Но не беспокойтесь о том, чтобы быть жевательным, это легко понять при использовании, например:
Кода -копия выглядит следующим образом:
<input type = "text" ng-model = "somemodel.someproperty" /> <br>
{{somemodel.someproperty}}
Нг-Инит
Эта директива называется инициализированной внутренней областью.
Эта инструкция обычно появляется в небольших приложениях, таких как давление демонстрации или что -то в этом роде ...
Кода -копия выглядит следующим образом:
<div ng-init = "job = 'Fighter'">
Я/an {{job}}
</div>
Помимо NG-INIT, у нас есть больше и лучших вариантов.
ng-app
Каждый раз, когда вы используете AngularJS, эта команда неразделима от нее. Кстати, $ rootscope включен.
Объявляет элемент NG-APP стать отправной точкой $ ROOTSCOPE, который является корнем цепочки объема, которая обычно объявляется в <html> вы понимаете.
То есть к нему можно получить доступ к прицелу под корнем.
Тем не менее, не рекомендуется чрезмерно использовать $ rootcope, чтобы избежать глобальных переменных, летящих по всему небу, что делает эффективность бедной и трудной для управления.
Вот пример:
Кода -копия выглядит следующим образом:
<html ng-app = "myApp">
<тело>
{{SomeProperty}}
</body>
<Скрипт>
var myApp = angular.module ('myApp', [])
.run (function ($ rootcope) {
$ rootscope.someproperty = 'Привет, компьютер';
});
</script>
</html>
NG-Controller
Мы используем эту инструкцию для установки контроллера на элементе DOM.
Контроллер? Действительно, это хорошо понимать это буквально, так зачем нам контроллер?
Помните, что когда Angularjs 1.2.x вы также можете определить такие контроллеры ...
Кода -копия выглядит следующим образом:
Функция ohmycontroller ($ scope) {
// ...
}
Этот метод запрещен в Angularjs 1.3.x, потому что этот метод заставит контроллеры летать по всему небу, и вы не можете сказать разницу между уровнями и всем, что висели на $ rootscope ...
NG-Контроллер должен иметь выражение в качестве параметра, и, кроме того, методы и свойства предыдущего объема $ наследуются благодаря объему $, а также включено $ ROOTSCOPE.
Следующий приведен просто простой пример, предок не может получить доступ к сфере масштабов ребенка.
Кода -копия выглядит следующим образом:
<div ng-controller = "AncestorController">
{{ancestorname}}
{{kildname}}
<div ng-controller = "ChildController">
{{ancestorname}}
{{kildname}}
</div>
</div>
<Скрипт>
var myApp = angular.module ('myApp', [])
.controller ('ChildController', function ($ scope) {
$ scope.childname = 'ребенок';
})
.controller ('AncestorController', function ($ scope) {
$ scope.ancestorname = 'предок';
});
</script>
Проблема с масштабами гораздо больше. Давайте отбросим это на данный момент и продолжим смотреть на другие встроенные инструкции.
Нг-форма
Сначала я не понимал, почему была команда формы, и тег <fform> чувствовал себя достаточно.
Принимая проверку формы в качестве примера, в предыдущей статье есть часть кода:
Кода -копия выглядит следующим образом:
<input type = "отправить" ng-disablet = "mainform. $ неверно" />
То есть, когда статус формы является недействительной, кнопка отправки отключена.
Например, если сцена немного сложнее, в родительской форме есть несколько детских форм, и родительская форма может быть представлена, когда 3 детской формы проходит проверку.
Однако <форма> не может быть вложен.
Учитывая этот сценарий, мы используем директиву NG-формы для решения этой проблемы.
Например:
Кода -копия выглядит следующим образом:
<form name = "mainform" novalidate>
<div ng-form = "form1">
Имя: <input type = "text" ng-required = "true" ng-model = "name"/> <br>
Идентификационный номер: <input type = "number" ng-minlength = "15" ng-maxlength = "18" ng-required = "true" ng-model = "idnum"/>
</div>
<br>
<div ng-form = "form2">
Имя Guardian: <input type = "text" ng-required = "true" ng-model = "gname"/> <br>
Идентификационный номер Guardian: <input type = "number" ng-minlength = "15" ng-maxlength = "18" ng-required = "true" ng-model = "gidnum"/>
</div>
<button ng-disablet = "form1. $ Invalid && form2. $ Invalid"> отправить все </button>
</form>
NG-DISADED
Для подобных атрибутов, которые вступают в силу до тех пор, пока они появляются, мы можем сделать его эффективным в AngularJs, возвращая значение true/false с помощью возврата выражения.
Отключить поля ввода формы.
Кода -копия выглядит следующим образом:
<textarea ng-disablet = "1+1 == 2"> 1+1 =? </textarea>
ng-readonly
Установите поле ввода формы на только для чтения, возвращая значение true/false по выражению.
Сделайте пример, и он становится только для чтения через 3 секунды.
Кода -копия выглядит следующим образом:
<input type = "text" ng-readonly = "stoptheworld" value = "Stop World после 3S"/>
.run (function ($ rootscope, $ timeout) {
$ rootscope.stoptheworld = false;
$ timeout (function () {
$ rootscope.stoptheworld = true;
}, 3000)
})
Нг проверил
Это для <input type = "fackbox" />, например ...
Кода -копия выглядит следующим образом:
<input type = "fackbox" ng-checked = "someproperty" ng-init = "someproperty = true" ng-model = "someproperty">
NG, выбран
Для использования с <опция> в <SELECT>, пример:
Кода -копия выглядит следующим образом:
<Метка>
<input type = "fackbox" ng-model = "isfullstack">
Я инженер с полным стеком
</label>
<select>
<опция> Фронт-Энд </option>
<опция> Бэк-Энд </option>
<опция ng-selected = "isfullstack"> полный стек !!! </option>
</select>
ng-show/ng-hide
Показать/скрыть HTML -элементы в соответствии с выражением, обратите внимание, что он скрыт, не удален из DOM, например:
Кода -копия выглядит следующим образом:
<div ng-show = "1+1 == 2">
1+1 = 2
</div>
<div ng-hide = "1+1 == 3">
ты меня не видишь.
</div>
ng-change
Это не html Onxxx или что-то в этом роде, а NG-XXX.
Используйте в сочетании с NG-модели, принимая NG-Change в качестве примера:
Кода -копия выглядит следующим образом:
<input type = "text" ng-model = "calc.arg" ng-change = "calc.result = calc.arg*2" />
<code> {{calc.result}} </code>
Или, например, ng-options
{{}}
На самом деле, это также директива. Может быть, это похоже на NG-Bind, но это можно увидеть, когда страница делает немного медленнее.
Кроме того, производительность {{}} гораздо меньше, чем NG-Bind, но очень удобно использовать.
нг-бинд
Поведение Ng-Bind аналогично {{}}, за исключением того, что мы можем использовать эту инструкцию, чтобы избежать FUC (вспышка невидимого контента), то есть мерцание, вызванное непрерывным.
Нг-Клак
NG-Cloak также может решить FOUC для нас. NG-Cloak скрывает внутренние элементы, пока маршрут не вызовет соответствующую страницу.
Нг-IF
Если выражение в ng-if является ложным, соответствующий элемент будет удален из DOM вместо того, чтобы быть скрытым, но при рассмотрении элемента вы можете увидеть, что выражение становится комментарием.
Если фаза скрыта, вы можете использовать NG-HIDE.
Кода -копия выглядит следующим образом:
<div ng-if = "1+1 === 3">
Этот элемент не может быть рассмотрен
</div>
<div ng-hide = "1+1 == 2">
Может быть рассмотрен
</div>
NG-Switch
Неважно, если вы используете его в одиночку, вот примеры:
Кода -копия выглядит следующим образом:
<div ng-switch on = "1+1">
<p ng-switch-default> 0 </p>
<p ng-switch-when = "1"> 1 </p>
<p ng-switch-when = "2"> 2 </p>
<p ng-switch-when = "3"> 3 </p>
</div>
NG-Repeat
Я не понимаю, что это не называется Итатером. Короче говоря, это должно переселить коллекцию и генерировать экземпляры шаблонов для каждого элемента. Некоторые специальные атрибуты могут использоваться в объеме каждого экземпляра следующим образом:
Кода -копия выглядит следующим образом:
$ index
$ первым
$ last
$ Middle
Даже
странный
Без необходимости объяснить это конкретно, легко увидеть, для чего они нужны. Вот пример:
Кода -копия выглядит следующим образом:
<ul>
<li ng-repeat = "char in
[{'Алфавит': 'k'},
{'Алфавит': 'a'},
{'Alphabet': 'V'},
{'Алфавит': 'l'},
{'Алфавит': 'e'},
{'Alphabet': 'z'}] "ng-show =" $ evel "> {{char.alphabet}} </li>
</ul>
Нг-Хреф
Сначала я сделал NG-модель в текстовом поле, а затем написал ее в Href, как это.
На самом деле, нет разницы между HREF и NG-HREF, поэтому мы можем попробовать это:
Кода -копия выглядит следующим образом:
<ul ng-init = "myhref = ''">
<li> <a ng-href = "{{myhref}}"> {{linktext}} </a> </li>
<li> <a href = "{{myhref}}"> Нажмите, но не обязательно правильный адрес </a> </li>
</ul>
.run (function ($ rootscope, $ timeout) {
$ rootscope.linktext = 'еще не загружено, вы не можете нажать »;
$ timeout (function () {
$ rootscope.linktext = 'Пожалуйста, нажмите'
$ rootscope.myhref = 'http://google.com';
}, 2000);
})
ng-src
То же самое верно, то есть ресурс не должен быть загружен до того, как выражение вступит в силу.
Пример (PS: картина хороша!):
Кода -копия выглядит следующим образом:
<img ng-src = "{{imgsrc}}"/>
.run (function ($ rootscope, $ timeout) {
$ timeout (function () {
$ rootscope.imgsrc = 'https://octodex.github.com/images/daftpunktocat-guy.gif';
}, 2000);
})
NG-Class
Например, динамически изменить стили классов с объектами в объеме:
Кода -копия выглядит следующим образом:
<style>
.red {фоновый цвет: red;}
.blue {фоновый цвет: синий;}
</style>
<div ng-controller = "curtimeController">
<button ng-click = "getCurrentSecond ()"> Получить время! </button>
<p ng-class = "{red: x%2 == 0, синий: x%2! = 0}"> число: {{x}} </p>
</div>
.controller ('curtimeController', function ($ scope) {
$ scope.getcurrentsecond = function () {
$ scope.x = new Date (). getSeconds ();
};
})
Приведенное выше контент, описанный в этой статье, надеюсь, вам понравится.