Primeros pasos con la directiva angularjs

Construyendo un componente reutilizable

Las directivas se pueden utilizar para crear componentes reutilizables. Aquí hay un ejemplo de un componente de “caja de usuario”:

UsuarioBox.js

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

Controlador.js

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

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

miPágina.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>

caja-de-usuario.html

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

Tu primera directiva

Nuestra directiva del primer elemento no hará mucho: simplemente calculará 2+2 y se llamará en html de esta manera:

<my-calculator></my-calculator>

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

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 plantilla.

// 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.

Instalación o configuración

Las directivas vienen con la propia biblioteca AngularJS. Una directiva de muestra se puede crear como:

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

Y se puede utilizar 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 usando la función de enlace simple

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

alcance: su alcance local objeto de directiva.

elemento: elemento html sobre 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;
     });
Directivas de uso común →