Use AngularJS para extender la funcionalidad HTML en directivas personalizadas. Definición funcional de "instrucciones" utilizadas por directivas personalizadas. La directiva personalizada solo reemplaza el elemento que se activa. Durante el proceso de arranque, la aplicación AngularJS encuentra el elemento coincidente y hace un buen trabajo al usar el método de compilar de instrucciones personalizado () para una actividad y luego tratar los elementos utilizando el método de instrucción personalizado () basado en el rango de instrucciones. AngularJS proporciona soporte para crear directivas personalizadas con los siguientes elementos del tipo.
Directivas de elementos: active un elemento coincidente cuando la directiva encuentra.
Atributo - - Active un atributo coincidente cuando la directiva encuentra.
CSS - - Active los estilos CSS coincidentes cuando la instrucción encuentre.
Comentario - - Active los comentarios coincidentes cuando se encuentre la directiva.
Comprender los comandos personalizados
Definir etiquetas HTML personalizadas.
<student name = "mahesh"> </stield> <br/>
<student name = "Piyush"> </stiet>
Defina directivas personalizadas para manejar las etiquetas HTML personalizadas anteriores.
var mainapp = angular.module ("mainapp", []); // Crear una directiva, el primer parámetro es el elemento HTML que se adjuntará. // Estamos adjuntando la etiqueta HTML del estudiante. // Esta directiva se activará tan pronto como se encuentre cualquier elemento estudiantil en htmlmainapp.directive ('student', function () {// Definir el objeto de directiva var directive = {}; // restrict = e, significa que la directiva es elemento directive directive.restrict = 'e'; // Template replica el elemento completo con su texto. <b> {{student.name}} </b>, rollo no: <b> {{student.rollno}} </b> "; // El alcance se usa para distinguir cada elemento de estudiante basado en criterios. Directive.Scope = {student:" = name "} // compilado se llama durante la inicialización de la aplicación. Angularjs lo llama una vez que html se lo carga. función (elemento, atributos) {element.css ("border", "1px sólido #cccccc"); <b> "+$ scope.student.rollno+" </b> <br/> "); element.css (" background-color ","#ff00ff ");} return LinkFunction;} Directiva de retorno;});Defina el controlador para actualizar el alcance como instrucción. Aquí usamos el valor del atributo de nombre como el alcance del niño.
MainApp.Controller ('StudentController', function ($ scope) {$ scope.mahesh = {}; $ scope.mahesh.name = "mahesh parashar"; $ scope.mahesh.rollno = 1; $ scope.piyush = {}; $ scope.piyush.name = "Piyushushus"; $ scope.piyush.rollno = 2;});ejemplo
<html> <cead> <title> Angular JS Directivas personalizadas </title> </head> <body> <h2> Aplicación de muestra de AngularJS </h2> <div Ng -pp = "MainApp" ng-Controller = "StudentController"> <Student Name = "Mahesh"> </Student> <Br/> <Nombre de estudiante = "Piyush"> </DivIs> </Div Div DivIs src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> <script> var mainapp = angular.module ("mainapp", []); mainapp.directive ('student', function () {var directive = {}; directive.restrict = 'e'; directive.template = "student: <b> {{student.name}} </b>, rollo no: <b> {{student.rollno}} </b>"; directive.scope = {student: "= name" función (elemento, atributos) {element.css ("border", "1px sólido #cccccccc"); <b> "+$ scope.student.rollno+" </b> <br/> "); element.css (" background-color ","#ff00ff ");} return LinkFunction;} Directiva de retorno;}); MainApp.Controller ('StudentController', function ($ scope) {$ scope.mahesh = {}; $ scope.mahesh.name = "mahesh parashar"; $ scope.mahesh.rollno = 1; $ scope.piyush = {}; $ scope.piyush.name = "Piyushushus"; $ scope.piyush.rollno = 2; </script> </body> </html>resultado
Abra textangularjs.html en un navegador web. Los resultados son los siguientes:
Lo anterior es la compilación de la información de comando personalizada de AngularJS, y continuaremos agregándola más tarde. ¡Gracias por su apoyo para este sitio!