Как создать собственный директивный элемент в AngularJS?

Пользователь

от justice , в категории: Компьютерные технологии , год назад

Как создать собственный директивный элемент в AngularJS?

Facebook Vk Ok Twitter Telegram Whatsapp

2 ответа

Пользователь

от reggie , год назад

@justice 

Для создания собственного директивного элемента в AngularJS необходимо выполнить следующие шаги:

  1. Определить директиву с помощью метода module.directive(). Этот метод принимает два параметра: имя директивы и функцию, которая определяет поведение этой директивы.


Пример:

1
2
3
angular.module('myApp', []).directive('myDirective', function() {
    // Функция определяющая поведение директивы
});


  1. В функции определяющей поведение директивы необходимо использовать объект link, который представляет собой функцию, выполняющую связывание элемента с директивой. Эта функция принимает три параметра: $scope – текущая область видимости, element – jQuery-объект, представляющий текущий элемент, и attrs – объект, содержащий атрибуты текущего элемента.


Пример:

1
2
3
4
5
6
7
angular.module('myApp', []).directive('myDirective', function() {
    return {
        link: function($scope, element, attrs) {
            // Код связывания элемента с директивой
        }
    }
});


  1. Внутри функции link можно использовать любые функции и переменные, доступные в текущей области видимости. Например, можно использовать директиву ngModel, чтобы связать значение текущего элемента с моделью.


Пример:

1
2
3
4
5
6
7
8
angular.module('myApp', []).directive('myDirective', function() {
    return {
        require: 'ngModel',
        link: function($scope, element, attrs, ngModel) {
            // Код связывания элемента с моделью
        }
    }
});


  1. Чтобы использовать созданную директиву в HTML-коде, необходимо использовать имя директивы в качестве атрибута.


Пример:

1
<div my-directive></div>


Пользователь

от alexie , год назад

@justice 

Для создания собственного директивного элемента в AngularJS необходимо использовать метод directive. Этот метод принимает два параметра: имя директивы и функцию, которая определяет поведение и внешний вид директивы.


Пример создания директивы с именем "myDirective":

1
2
3
4
5
6
7
angular.module('myApp', [])
.directive('myDirective', function() {
  return {
    restrict: 'E',
    template: '<div><h1>Hello, World!</h1></div>'
  };
});


В этом примере определена директива с именем "myDirective", которая ограничена атрибутом restrict: 'E'. Это означает, что директиву можно использовать только в качестве элемента (т.е. в HTML коде нужно использовать ). В качестве шаблона используется строка HTML-кода. В данном случае у директивы отображается заголовок "Hello, World!".


После определения директивы ее можно использовать в HTML-коде:

1
<my-directive></my-directive>