angularjs-directiveEmpezando con la directiva angularjs

Observaciones

Las directivas AngularJS son elementos personalizados en HTML (como un atributo, nombre de elemento, comentario o clase CSS) que le dicen a AngularJS que adjunte un comportamiento específico a ese elemento DOM, o incluso que transforme el elemento DOM y sus elementos secundarios. En resumen, cuando creamos una directiva, AngularJS tratará ese elemento de manera diferente.

Construyendo un componente reutilizable.

Las directivas se pueden utilizar para construir componentes reutilizables. Aquí hay un ejemplo de un componente de "carpeta de usuario":

userBox.js

angular.module('simpleDirective', []).directive('userBox', function() {
  return {
    scope: {
        username: '=username',
        reputation: '=reputation'
    },
    templateUrl: '/path/to/app/directives/user-box.html'
  };
});
 

Controller.js

var myApp = angular.module('myApp', ['simpleDirective']);

myApp.controller('Controller', function($scope) {
    $scope.user = "John Doe";
    $scope.rep = 1250;
});
 

myPage.js

<html lang="en" ng-app="myApp">
  <head>
    <script src="/path/to/app/angular.min.js"></script>
    <script src="/path/to/app/controllers/Controller.js"></script>
    <script src="/path/to/app/directives/userBox.js"></script>
  </head>

  <body>
  
    <div ng-controller="Controller">
        <user-box username="user" reputation="rep"></user-box>
    </div>
    
  </body>
</html>
 

user-box.html

<div>{{username}}</div>
<div>{{reputation}} reputation</div>
 

Instalación o configuración

Directivas viene con la propia biblioteca AngularJS. Se puede crear una directiva de ejemplo como:

angular.module('simpleDirective', [])
.directive('helloData', function() {
  return {
    template: 'Hello, {{data}}'
  };
});
 

Y puede ser utilizado como:

JS:

angular.module('app', ['simpleDirective'])
.controller('Controller', ['$scope', function($scope) {
  $scope.data = 'World';
}])
 

HTML

<div ng-controller="Controller">
  <div hello-data></div>
</div>
 

Se compilará como:

Hola Mundo

Mensaje emergente de éxito / error que utiliza una función de enlace simple

La función de enlace es la mejor manera en directivas personalizadas para manipular DOM. Toma tres atributos como entrada (alcance, elemento, atributo) en secuencia

Ámbito: su ámbito de aplicación local objeto de directiva.

elemento: elemento html en el que se utiliza la directiva.

atributo: da acceso a todos los atributos utilizados en el elemento referido.

// on success call or similarly error, warning, info in controller
    $scope.message={
                text: "Saved Successfully",
                type: "SUCCESS"
                };    
                
    <user-info msg="message"> </user-info>   //in html



    var mainApp = angular.module("mainApp", []);
     mainApp.directive('userInfo', function() {
        var directive = {};
        directive.restrict = 'E';
        
        directive.scope = {
           message : "=msg"
        },
        
        directive.link = function(scope, element, attributes) {
            if(scope.message.type==='SUCCESS')
              scope.message.text = 'SUCCESS: '+scope.message.text+' !';
            else if(scope.message.type==='ERROR')  
              scope.message.text = 'ERROR: '+scope.message.text+' !';
            else if(scope.message.type==='WARNING')  
              scope.message.text = 'WARNING: '+scope.message.text+' !'
            else if(scope.message.type==='INFO')  
              scope.message.text = 'INFO: '+scope.message.text+' !'
          
            element.on('click', function(event) {     //on click of div pop-up will smoothly close
                      $(this).fadeOut();   
                      });
           },
           directive.template = '<div ng-class={{message.type}}>'+            // one can create different bg-color as per type of message and width/height
                                '<div class="message-text">{{message.text}}<div>'+   //message text will be printed
                                '<div>';
           
        return directive;
     });
 

Tu primera directiva

Nuestra primera directiva de elementos no hará mucho: solo calculará 2+2 y se llamará en html así:

<my-calculator></my-calculator>
 

Observe que el nombre de la directiva es myCalculator (en CamelCase), pero en html se usa como my-calculator (en caso de error).

Como queremos que nuestra directiva se use como elemento html, usaremos restrict: 'E' .

Cada directiva tiene la plantilla que será compilada e insertada. Nuestra directiva es muy simple, por lo que insertaremos nuestro html como cadena en un parámetro de template .

// directives/my-calculator.js

angular.module('exampleApp', [])
.directive('myCalculator', function() {
  return {
    restrict: 'E',
    template: '<span> My directive can calculate 2+2: {{2+2}} </span>'
  };
});
 

HTML

<!DOCTYPE html>
<html ng-app="exampleApp">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="my-calculator.js"></script>
  </head>

  <body>
    Here is my first directive: 
    <my-calculator></my-calculator>
  </body>

</html>
 

El resultado se verá así:

Aquí está mi primera directiva: Mi directiva puede calcular 2 + 2: 4

Si quieres jugar con el ejemplo en vivo, ve a plunkr .