Промяна на DOM с AngularJS

Съдържание
Можем да разширим работата на HTML чрез промяна на поведението и преобразуване на дърво СЛЪНЦЕ, с това можем да променяме елементи, да добавяме нови стилове и други действия, които ни позволяват да разработим по -динамичен потребителски интерфейс, за това трябва да използваме директиви.
За това можем да използваме директиви собствено на AngularJSАко обаче се нуждаем от нещо, което не можем да постигнем по рождение, можем да напишем наши собствени директиви, с това ще можем да слушаме и да реагираме на събития в браузъра или просто да правим неща, които не прави. AngularJS по подразбиране.
При разработване на приложение с AngularJS ще има някои случаи, в които ще се сблъскаме със ситуации, в които местните директиви не отговарят на представата ни за това какво трябва да прави нашият код, в такива моменти можем да обжалваме изграждаме наши собствени директиви.
За да дефинираме нова директива, можем да следваме следната формула:
 var moduloApp = angular.module ('moduloApp', […]); moduloApp.directive ('DirectorName', DirectiveMethod); 

Както виждаме, трябва само да дефинираме модула, в който ще прилагаме нашата директива, след което трябва да посочим нейното име и метода, който тя трябва да изпълни.
HTML 5 има много интересна функционалност, която е автофокус, това ни позволява да фокусираме входящ елемент във форма, като по този начин помагаме да дефинираме пътя за потребителя, но какво се случва, ако нямаме HTML 5 и не искаме да се фокусираме върху даден вход, защото именно там той влиза в игра AngularJS и директивите, с директива можем да разрешим тази ситуация по прост начин.
Какво да правим?Първо трябва да изградим персонализирана директива, използвайки формата, която сме посочили по -рано, с това установяваме желаното поведение, в този случай автофокус. След това благодарение на обекта $ обхват Можем да приложим тази директива към всеки елемент, в случая с този пример ще я приложим към връзка, с това можем да изпитаме силата на AngularJS.
Нека видим резултата от това, което искаме да постигнем:

За това трябва да следваме следния код, където сме реализирали вече обясненото:
 Без фокус С фокус{{message.text}}

Както виждаме, ние създаваме персонализирана директива в началото, това води до поставянето на автофокус в елемента, който има тази директива, тогава изграждаме контролер, който ще ни помогне да открием промените при отпечатване на някои съобщения.
С това завършваме този урок, тъй като виждаме манипулацията на СЛЪНЦЕ възможно е с AngularJS и благодарение на директивите можем да постигнем много интересни ефекти.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка

Така ще помогнете за развитието на сайта, сподели с приятелите си

wave wave wave wave wave