自定义指令 AngularJS

Usar instrucciones personalizadas en AngularJS para expandir las funciones de HTML. Definir instrucciones personalizadas utilizando la función "instrucción". Las instrucciones personalizadas solo reemplazan los elementos activados. Durante la guía, el aplicación de AngularJS encuentra los elementos coincidentes y los utilizacompile()El método de instrucción personalizada realiza una actividad una vez, luegolink()Utilizar el método de instrucción personalizada para manejar el elemento según el rango de la instrucción. AngularJS admite la creación de instrucciones personalizadas para los siguientes tipos de elementos.

Instrucción de elemento −Al encontrar un elemento que coincide, la instrucción se activará.
Atributo −Al encontrar un atributo que coincide, la instrucción se activará.
CSS −Al encontrar un estilo CSS que coincide, la instrucción se activará.
Comentario −Al encontrar una nota de comentario que coincide, la instrucción se activará.

Conocer las instrucciones personalizadas

Definir etiquetas html personalizadas.

<student　name　=　"Sea"></student><br/><student name = "Piyush"></student>

Definir instrucciones personalizadas para manejar las etiquetas html personalizadas anteriores.

var　mainApp　=　angular.module("mainApp",　[]);
//Crear una instrucción, el primer parámetro es el elemento html que se va a adjuntar.	　　
//Vamos a adjuntar la etiqueta html del estudiante.　
//Una vez que se encuentra cualquier elemento Student en html, esta instrucción se activará
mainApp.directive('student',　function()　{
　　　//Definir el objeto de instrucción
　　　var　directive　=　{};
　　　
　　　//limit = E, lo que indica que la instrucción es una instrucción Elemento
　　　directive.restrict　=　'E';
　　　
　　　//El modelo reemplaza el elemento completo con su texto.　
　　　directive.template　=　"Estudiante:　<b>{{student.name}}</b>　,　
　　　　　　N° de Rol: <b>{{student.rollno}}</b>/b>";
　　　
　　　//El ámbito se usa para distinguir cada elemento de estudiante según las condiciones.
　　　directive.scope　=　{
　　　　　　student　:　"=name"
　　　}
　　　
　　　//Se llama compile durante la inicialización de la aplicación. AngularJS llama　
　　　　　　una vez cuando la página html está cargada.
　　　directive.compile　=　function(element,　attributes)　{
　　　　　　element.css("border",　"1px sólido #cccccc");
　　　　　　
　　　　　　//linkFunction se vincula con cada elemento que tiene ámbito para obtener datos específicos del elemento.
　　　　　　var　linkFunction　=　function($scope,　element,　attributes)　{
　　　　　　　　　element.html("Estudiante:　<b>"+$scope.student.name　+"</b>　,　
　　　　　　　　　　　　N° de Inscripción:　<b>"+$scope.student.rollno+"</b><br/>
　　　　　　　　　element.css("background-color",　"#ff00ff");
　　　　　　}
　　　　　　return　linkFunction;
　　　}
　　　
　　　return　directive;
});

Defina un controlador para actualizar el ámbito de la directiva. Aquí, usamos el valor de la propiedad name como subnivel del ámbito.

mainApp.controller('StudentController',　function($scope)　{
　　　$scope.Sea　=　{};
　　　$scope.Sea.name　=　"Sea　Gull";
　　　$scope.Sea.rollno　　=　1;
　　　
　　　$scope.Piyush　=　{};
　　　$scope.Piyush.name　=　"Piyush　Gull";
　　　$scope.Piyush.rollno　　=　2;
});

Ejemplo en línea

Ejemplo

<html>
　　　<head>
　　　　　　<title>AngularJS-Directiva personalizada</title>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>AngularJS-Ejemplo de directiva personalizada</h2>
　　　　　　
　　　　　　<div　ng-app　=　"mainApp"　ng-controller　=　"StudentController">
　　　　　　　　　<student　name　=　"Sea"></student><br/>
　　　　　　　　　<student　name　=　"Piyush"></student>
　　　　　　</div>
　　　　　　　　
　　　　　　<script　src　=　"https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js"></script>
　　　　　　
　　　　　　<script>
　　　　　　　　　var　mainApp　=　angular.module("mainApp",　[]);
　　　　　　　　　
　　　　　　　　　mainApp.directive('student',　function()　{
　　　　　　　　　　　　var　directive　=　{};
　　　　　　　　　　　　directive.restrict　=　'E';
　　　　　　　　　　　　directive.template　=　"Estudiante:　<b>{{student.name}}</b>　,　N° de Inscripción:　<b>{{student.rollno}}</b>";
　　　　　　　　　　　　
　　　　　　　　　　　　directive.scope　=　{
　　　　　　　　　　　　　　　student　:　"=name"
　　　　　　　　　　　　}
　　　　　　　　　　　　
　　　　　　　　　　　　directive.compile　=　function(element,　attributes)　{
　　　　　　　　　　　　　　　element.css("border",　"1px sólido #cccccc");
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　var　linkFunction　=　function($scope,　element,　attributes)　{
　　　　　　　　　　　　　　　　　　element.html("Estudiante:　<b>"+$scope.student.name　+"</b>　,　Roll　No:　<b>"+$scope.student.rollno+"</b><br/>
　　　　　　　　　　　　　　　　　　element.css("background-color",　"#ff00ff");
　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　return　linkFunction;
　　　　　　　　　　　　}
　　　　　　　　　　　　
　　　　　　　　　　　　return　directive;
　　　　　　　　　});
　　　　　　　　　
　　　　　　　　　mainApp.controller('StudentController',　function($scope)　{
　　　　　　　　　　　　$scope.Sea　=　{};
　　　　　　　　　　　　$scope.Sea.name　=　"Sea　Gull";
　　　　　　　　　　　　$scope.Sea.rollno　　=　1;
　　　　　　　　　　　　$scope.Piyush　=　{};
　　　　　　　　　　　　$scope.Piyush.name　=　"Piyush　Gull";
　　　　　　　　　　　　$scope.Piyush.rollno　　=　2;
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>

测试看看‹/›

输出结果

在网络浏览器中打开textAngularJS.htm。查看结果。

国际化 AngularJS 依赖注入 AngularJS

Tutoriales básicos de AngularJS

自定义指令 AngularJS

Conocer las instrucciones personalizadas

Ejemplo en línea