AngularJS поддерживает пользовательские свойства тегов и добавляет пользовательский контент без использования операций узлов DOM.
Четыре основных черт Angularjs упоминаются ранее:
1 MVC
2 модульный
3 инструкции
4 двустороннего привязки данных
Будет введено следующее:
1 Как настроить команду
2 Использование пользовательских инструкций
3 встроенного использования пользовательских директив
Как настроить директивы:
Angular-это структура на основе модуля, поэтому вы должны создать свой собственный модуль:
var myAppmodule = angular.module ("myApp", []);
Затем создайте директиву в этом модуле
myAppModule.directive ("xingoo", function () {return {restrict: 'aecm', шаблон: '<div> Привет, моя директива </div>', замена: true}});Среди них Xingoo - это имя нашего пользовательского тега, за которой следует функция метода.
Функция возвращает комбинацию пары ключей, которая определяет методы использования, свойства и т. Д. Тэг.
Посмотрим, что он определяет:
1 Ограничение: определяет методы использования тегов, в общей сложности четыре типа, а именно AECM
2 Шаблон: Определите шаблон для тега. Внутри - это строка, используемая для замены пользовательских тегов
3 замена: поддержать ли замену
4 TransClude: поддерживать встроенный
Как использовать команду:
Вышеупомянутые четыре способа использования меток, а именно AECM.
Атрибут: используется в качестве атрибута
<div xingoo> </div>
E Элемент: используется в качестве элемента метки
<Xingoo> </xingoo>
C класс: используется в качестве стиля CSS
<div> </div>
M Комментарии Комментарии: Используется в качестве комментариев (этот метод недоступен в версии 1.2!)
<!-Директива: Xingoo->
<div> </div>
Вообще говоря, рекомендуется использовать его в качестве атрибутов и элементов.
Если вы хотите расширить атрибуты на существующие теги HTML, используйте метод атрибута.
Когда вы хотите настроить тег, возьмите форму тега.
Чтобы использовать этот метод, вы должны объявить соответствующую букву в ограничении в директиве определения.
Встроенное использование директив:
Поскольку другие теги могут быть вложены внутри тега, если вы хотите гнездовать другие теги элементов в пользовательском теге, вам нужно:
1 Используйте свойство Transclude, установив на True.
2 и используйте свойство NG-TransClude, чтобы определить внутреннее вложенное местоположение.
Код заключается в следующем:
myAppModule.directive ("test", function () {return {ограничение: 'aecm', transtate: true, template: "<div> хаха!Все коды
<! Doctype html> <html ng-app = "myApp"> <Head> <meta http- Equiv = "content-type" content = "text /html; charset = utf-8" /> <script src = "http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"> </script> </head> <body> <xingoo> </xingoo> <div Xingoo> </div> <div> </div> <!-Divoo> <d Div> </div> <d Div> </div> <! <Xingoo> 3333 </xingoo> <hr> <test> 4444 </test> <script type = "text/javascript"> var myappmodule = angular.module ("myApp", []); myAppModule.directive ("xingoo", function () {return {restrict: 'aecm', шаблон: '<div> Привет, моя директива </div>', замена: true}}); myAppModule.directive ("test", function () {return {ограничение: 'aecm', transclude: true, template: "<div> ха-ха! </script> </body> </html>Результаты бега
Выше приведено информация, разбирающая пользовательские директивы AngularJS. Мы будем продолжать добавлять соответствующую информацию в будущем. Спасибо за поддержку этого сайта!