Подробное объяснение пользовательских директив в AngularJS и примеры кода

AngularJS поддерживает пользовательские атрибуты тегов, добавляя пользовательские содержимое без необходимости использования операций с узлами DOM.

Ранее упоминалось о четырех основных характеристиках AngularJS:

　　1 MVC

　　2 Модулизация

　　3 Инструкции

　　4 Двусторонняя привязка данных

Ниже будет介绍 следующее:

　　1 Как создать пользовательскую инструкцию

　　2 Использование пользовательских инструкций

　　3 Использование инлайновых инструкций пользовательских инструкций

　　Как создать пользовательскую инструкцию:

　　Angular - это фреймворк, основанный на модулях, поэтому сначала нужно создать свой модуль:

var myAppModule = angular.module("myApp",[]);

　　Затем создайте инструкцию directive на основе этого модуля　　　　　　

 myAppModule.directive("xingoo",function(){
    return{
     restrict:'AECM',
     template:'<div>hello my directive</div>',
     repalce:true
    }
   });

　　Xingoo - это имя нашего пользовательского тега, за которым следует его функция.

　　Функция return возвращает комбинацию ключей и значений, в которой определяются способы использования тега, атрибуты и т.д.

　　Посмотрим, что оно определяет:

　　1 restrict: определяет способ использования тега, всего四种,分别是 AECM

　　2 template: определяет шаблон тега. Внутри находится строка, которая используется для замены пользовательского тега

　　3 replace: поддерживает ли замена

　　4 transclude: поддерживает ли внедрение

　　Как использовать инструкции:

　　Как уже упоминалось, существует четыре способа использования тегов, то есть AECM.

　　A атрибут: используйте как атрибут

　　E элемент: используйте как элемент тега

　　C класс: используйте как CSS стиль

　　M комментарии: используйте как комментарии (этот способ был протестирован и не работает в версии 1.2!)

<div></div>

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

　　Когда вы хотите расширить атрибуты существующего тега html, используйте способ атрибутов.

　　Когда вы хотите создать пользовательский тег, используйте форму тега.

　　Чтобы использовать способ, необходимо声明 соответствующую букву в свойстве restrict инструкции.　

　　Использование инлайновых инструкций:

　　Поскольку внутри тега можно использовать другие теги, чтобы использовать другие элементы тегов в пользовательских тегах, вам нужно:

　　1 Используйте атрибут transclude и установите его значение в true.

　　2 Используйте атрибут ng-transclude, чтобы определить местоположение внутренней вложенности.

　　Код таков:　　　　　　

  myAppModule.directive("test",function(){
    return{
     restrict:'AECM',
     transclude:true,
     template:"<div>haha! <div ng-transclude></div> wuwu!</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 class="xingoo"></div>
  <!-- directive:xingoo -->
  <div></div>
  <hr>
  <xingoo>3333</xingoo>
  <hr>
  <test>4444</test>
  <script type="text/javascript">
   var myAppModule = angular.module("myApp",[]);
   myAppModule.directive("xingoo",function(){
    return{
     restrict:'AECM',
     template:'<div>hello my directive</div>',
     repalce:true
    }
   });
   myAppModule.directive("test",function(){
    return{
     restrict:'AECM',
     transclude:true,
     template:"<div>haha! <div ng-transclude></div> wuwu!</div>"
    }
   });
  </script>
 </body>
</html>

　　Результат выполнения

Это является материалом для сбора данных о пользовательских директивах AngularJS, и в будущем будут продолжены дополнения соответствующих данных, спасибо всем за поддержку нашего сайта!

Заявление: Контент этой статьи взят из интернета, авторские права принадлежат их законным владельцам, контент был предоставлен пользователями Интернета в качестве добровольного вклада и загружен самостоятельно, этот сайт не имеет права собственности на него, не был отредактирован вручную и не несет ответственности за соответствующие юридические последствия. Если вы обнаружите подозрительный контент, касающийся авторских прав, пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма замените # на @) для жалоб и предоставьте соответствующие доказательства. Если будет установлено, что контент нарушает авторские права, сайт немедленно удаляет涉嫌侵权的内容.

Основной учебник

Вам может понравиться