Use o AngularJS para estender a funcionalidade HTML em diretivas personalizadas. Definição funcional de "instruções" usadas pelas diretivas personalizadas. A diretiva personalizada apenas substitui o elemento que é ativado. Durante o processo de inicialização, o aplicativo AngularJS encontra o elemento de correspondência e usa o método Custom Directive Compile () para uma atividade e, em seguida, processa os elementos usando o método Link () de Link () personalizado com base no intervalo de instruções. O AngularJS fornece suporte para criar diretrizes personalizadas com os seguintes elementos do tipo.
Diretivas de elemento - Ative um elemento correspondente quando a diretiva encontrar.
Atributo - - Ative um atributo correspondente quando a diretiva encontra.
CSS - - Ative os estilos CSS correspondentes quando a instrução encontrar.
Comentário - - Ative comentários correspondentes quando a diretiva encontra.
Entender comandos personalizados
Defina tags HTML personalizadas.
<name do aluno = "mahesh"> </cudent> <br/>
<name do aluno = "piyush"> </fudent>
Defina as diretrizes personalizadas para lidar com as tags HTML personalizadas acima.
var mainApp = angular.module ("mainApp", []); // Crie uma diretiva, o primeiro parâmetro é o elemento html a ser anexado. // Estamos anexando a tag html do aluno. // Esta diretiva será ativada assim que qualquer elemento do aluno for encontrado em htmlmainapp.directive ('Student', function () {// Defina o objeto Diretiva var Directive = {}; // restringe = E, significa que a diretiva da Diretiva é a Diretiva de Element.Restrit = 'E'; // Matriz Element. <b> {{student.name}} </b>, roll não: <b> {{student.rollno}} </b> "; // escopo é usado para distinguir cada elemento do aluno baseado em critério. função (elemento, atributos) {Element.css ("borda", "1px Solid #ccccc"); <b> "+$ scope.student.rollno+" </b> <br/> "); element.css (" background-color ","#ff00ff ");} retornar linkfunction;} diretiva de retorno;});Defina o controlador para atualizar o escopo como a instrução. Aqui usamos o valor do atributo de nome como escopo da criança.
mainApp.Controller ('StudentController', função ($ scope) {$ scope.mahesh = {}; $ scope.mahesh.name = "mahesh parashar"; $ scope.Mahesh.rollno = 1; $ scope.piyush = {}; $ scope.piy.piysy.nohy.nohy. $ scope.piyush.rollno = 2;});exemplo
<html> <head> <title> Diretivas personalizadas do Angular JS </ititle> </ad Head> <body> <h2> Aplicação de amostra de angularjs </h2> <div ng-app = "mainApp" ng-CONTROLLER = "StudentController"> <dentname = "mahesh"> </student> <br/> name = " src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> <cript> var mainApp = angular.module ("mainApp", []); MainApp.Directive ('Student', function () {var Directive = {}; Directive.Restrict = 'E'; Directive.Template = "Student: <b> {{student.name}}} </b>, roll não: <b> {{student.rollno}}} </b>"; atributos) {element.css ("borda", "1px Solid #cccccccc"); elemento.css ("cor de fundo", "#ff00ff"); mainApp.Controller ('StudentController', função ($ scope) {$ scope.mahesh = {}; $ scope.mahesh.name = "mahesh parashar"; $ scope.Mahesh.rollno = 1; $ scope.piyush = {}; $ scope.piy.piysy.nohy.nohy. $ scope.piyush.rollno = 2; </script> </body> </html>resultado
Open textangularjs.html em um navegador da web. Os resultados são os seguintes:
O exposto acima é a compilação das informações de comando personalizadas do AngularJS e continuaremos a adicioná -las mais tarde. Obrigado pelo seu apoio a este site!