Директиви

AngularJS Ви позволява да разширите възможностите на HTML с нови атрибути, наречени Директиви. AngularJS има набор от вградени директиви, които предлагат възможността лесно да добавите някаква функционалност към вашите приложения. AngularJS също ви позволява да създавате ваши собствени директиви.

Директиви AngularJS – AngularJS директивите са разширени HTML атрибути с префикс ng-. Директивата ng-app инициализира приложение AngularJS. Директивата ng-init инициализира данните за приложенията. Директивата ng-модел обвързва стойността на HTML тагове за входни данни (input, select, textarea) към данните от приложението.

Опитайте сами »

Директивата ng-app също така казва на AngularJS, че елементът div е „собственикът“ на приложението AngularJS.

Свързване на данни

Изразът {{firstName}}, в горния пример, е израз на AngularJS за свързване на данни. Свързването на данни в AngularJS обвързва AngularJS изрази с AngularJS данни. {{firstName}} е свързан с ng-model="firstName". В следващия пример две текстови полета са обвързани с две директиви ng-model:

Опитайте сами »

Повтарящи се HTML елементи

Директивата ng-repeat повтаря даден HTML елемент:

Опитайте сами »

Директивата ng-repeat всъщност клонира HTML елементите по веднъж за всеки елемент в колекцията. Директивата ng-repeat, използвана за набор от обекти:

Опитайте сами »

AngularJS е идеален за работа на приложения с база данни и извършване на операциите CRUD (Create Read Update Delete). Само си представете, ако тези обекти са записи от база данни.

Директивата ng-app

Директивата ng-app определя коренния елемент на AngularJS приложението. Директивата ng-app автоматично ще стартира (инициализира) приложението, когато се зарежда уеб страницата.

Директивата ng-init

Директивата ng-init определя първоначалните стойности за приложението AngularJS. Обикновено няма да използвате ng-init. Вместо това ще използвате контролер или модул. Ще научите повече за контролерите и модулите по-късно.

Директивата ng-model

Директивата ng-model обвързва стойността зададена в HTML елементите input, select, textarea към данните от приложенията. Директивата ng-model може също:

  • Осигури потвърждаване на типа на входните данни – number, email, required.
  • Предоставя статус за данните на приложението (invalid, dirty, touched, error).
  • Предоставя CSS класове за HTML елементи.
  • Свързва HTML елементи към HTML формуляри.

Създаване на нови директиви

В допълнение към всички вградени директиви в AngularJS, можете да създадете свои собствени директиви. Създават се нови директиви, като се използва функцията .directive. За да се позове новата директива, направете HTML елемент със същото име за тага, както е именувана новата директива. Когато посочвате дадена директива, трябва да използвате camel case именуване – w3TestDirective, но когато я извиквате, трябва да използвате името, но разделено с тирета – w3-test-directive:
Опитайте сами »

Можете да се обърнете към директива, като използвате:

  • Element name
  • Attribute
  • Class
  • Comment

Примерите по-долу ще доведат до един и същ резултат:

Опитайте сами »
Опитайте сами »
Опитайте сами »
Опитайте сами »

Ограничения

Можете да ограничите директивите си да бъдат извиквани само по някои от следните методите. Чрез добавяне на ограничение на собственост със стойност „A“ директивата може да бъде извикана само чрез атрибути:

Опитайте сами »
  • E for Element name
  • A for Attribute
  • C for Class
  • M for Comment

По подразбиране стойността е EA, което означава, че както имената на елементите, така и имената на атрибутите могат да се позовават на директивата.