Статьи

Пример пользовательских директив AngularJS

Январь 14, 2019

Добро пожаловать, читатели, в этом уроке мы разберемся в пользовательских директивах angularjs.

1. Введение

  • AngularJS помогает разработчикам писать собственные директивы, которыми легко манипулировать и которые упрощают манипулирование DOM
  • Эти директивы расширяют функциональность HTML и помогают манипулировать поведением HTML
  • Директивы могут быть реализованы следующими способами, т.е.
    • Директивы элемента : активируется, когда в шаблоне найден соответствующий элемент HTML
    • Директивы атрибутов : активируется, когда в шаблоне найден соответствующий HTML-атрибут
    • Директивы класса CSS : активируется, когда найден соответствующий класс CSS
    • Директивы комментариев : включается, когда найден соответствующий комментарий HTML

1.1 Часто используемые свойства Директивы

  • restrict : Определяет реализацию директивы в угловом приложении, т.е. «A» для атрибута, «C» для класса, «E» для элемента, «M» для комментария
  • область действия : доступ к данным или методу внутри шаблона и функции связи. Он бывает трех типов: true , false или изолированная область (т. Е. Область, которая не наследуется от родителя и существует сама по себе).
  • template : HTML-контент, который будет сгенерирован при компиляции директивы
  • templateUrl : путь шаблона, который будет использоваться директивой

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

2. Пример пользовательских директив AngularJS

Вот систематическое руководство для реализации этого учебника.

2.1 Используемые инструменты

Мы используем редактор HTML, чтобы создать файл HTML и воспроизвести его в браузере.

3. Создание файла HTML

Добавьте следующий код в HTML-файл.

Angularjs-заказ directive.html

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<html>
   <head>
      <title>JCG tutorial</title>
   </head>
   <body>
      <h1>AngularJS Custom Directives</h1>
      <div ng-app = "myApp" ng-controller = "empCtrl">
         <myemployee name = "Abc"></myemployee>
         <br/>
         <myemployee name = "Xyz"></myemployee>
      </div>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
      <script>
        var myApp = angular.module("myApp", []);
        myApp.directive('myemployee', function() {
            var directive = {};
            directive.restrict = 'E';
            directive.template = "myemployee: <b>{{myemployee.name}}</b> , Id: <b>{{myemployee.id}}</b>, Designation: <b>{{myemployee.designation}}</b>";
            directive.scope = {
                myemployee: "=name"
            }
            directive.compile = function(element, attributes) {
                var linkFunction = function($scope, element, attributes) {
                    element.html("Employee: <b>" + $scope.myemployee.name + "</b> , Id: <b>" + $scope.myemployee.id + "</b>, Designation: <b>" + $scope.myemployee.designation + "</b><br/>");
                }
                return linkFunction;
            }
            return directive;
        });
         
        myApp.controller('empCtrl', function($scope) {
            $scope.Abc = {};
            $scope.Abc.name = "Abc";
            $scope.Abc.id = 101;
            $scope.Abc.designation = "Software engineer";
            $scope.Xyz = {};
            $scope.Xyz.name = "Xyz";
            $scope.Xyz.id = 102;
            $scope.Xyz.designation = "Software engineer";
        });        
      </script>
   </body>
</html>

И сделано! Мы создали простую HTML-страницу, которую разработчики могут дважды щелкнуть для просмотра в браузере.

4. Запустите приложение

Дважды щелкните файл HTML для предварительного просмотра в браузере по вашему выбору.

5. Демонстрация проекта

Если все идет хорошо, пользовательская директива будет отображать информацию о сотруднике.

Пользовательские директивы AngularJS - страница указателя
Рис. 1: Указатель

Это все для этого урока, и я надеюсь, что статья послужила вам тем, чего вы ожидали. Удачного обучения и не забудьте поделиться!

6. Заключение

В этом разделе мы узнали, как создавать пользовательские директивы в приложении angularjs. Разработчики могут загрузить образец приложения в виде проекта Eclipse в разделе « Загрузки ».

7. Скачать угловой проект

Это был учебник по пользовательским директивам в AngularJS.

Скачать
Вы можете скачать полный исходный код этого примера здесь: Пример пользовательских директив AngularJS
40
Share: