Changer le DOM avec AngularJS

Nous pouvons étendre le fonctionnement du HTML par le changement de comportement et les transformations d'arbres SOLEIL, avec cela, nous pouvons modifier des éléments, ajouter de nouveaux styles et d'autres actions qui nous permettent de développer une interface utilisateur plus dynamique, pour cela nous devons utiliser le directives.
Pour cela, nous pouvons utiliser le directives propre de AngularJSCependant, si nous avons besoin de quelque chose que nous ne pouvons pas réaliser nativement, nous pouvons écrire nos propres directives, avec cela nous pourrons écouter et répondre aux événements du navigateur ou simplement faire des choses qu'il ne fait pas. AngularJS par défaut.
Lors du développement d'une application avec AngularJS il y aura des occasions dans lesquelles nous rencontrerons des situations dans lesquelles les directives natives ne sont pas conformes à notre idée de ce que notre code devrait faire, dans des moments comme celui-ci, nous pouvons faire appel construire nos propres directives.
Pour définir une nouvelle directive, nous pouvons suivre la formule suivante :

 var moduloApp = angular.module ('moduloApp', […]); moduloApp.directive ('DirectiveName', DirectiveMethod); 

Comme on peut le voir, il suffit de définir le module dans lequel on va appliquer notre directive puis il faut indiquer son nom et la méthode qu'il doit exécuter.
HTML5 a une fonctionnalité très intéressante qui est la mise au point automatique, cela nous permet de focaliser un élément d'entrée dans un formulaire, aidant ainsi à définir le chemin pour un utilisateur, cependant que se passe-t-il si nous n'avons pas HTML5 et on ne veut pas se focaliser sur une entrée, car c'est là qu'elle entre en jeu AngularJS et les directives, avec une directive, nous pouvons résoudre cette situation de manière simple.
Que devrions nous faire?Nous devons d'abord construire une directive personnalisée en utilisant le formulaire que nous avons indiqué précédemment, avec cela nous établissons le comportement souhaité, dans ce cas le mise au point automatique. Puis grâce à l'objet $ portée Nous pouvons appliquer cette directive à n'importe quel élément, dans le cas de cet exemple, nous allons l'appliquer à un lien, avec cela nous pouvons expérimenter la puissance de AngularJS.
Voyons le résultat de ce que nous voulons réaliser :

Pour cela, nous devons suivre le code suivant, où nous avons implémenté ce qui a déjà été expliqué :

 Sans mise au point Avec mise au point{{message.text}}

Comme on peut le voir, nous établissons une directive personnalisée au départ, cela conduit à placer le mise au point automatique dans l'élément qui a cette directive, alors nous construisons un contrôleur qui nous aidera à détecter les changements lors de l'impression de certains messages.
Avec cela, nous terminons ce tutoriel, car nous voyons la manipulation du SOLEIL c'est faisable avec AngularJS et grâce aux directives, nous pouvons obtenir des effets très intéressants.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif