Directivas

• Son marcadores en el DOM, que le indican al compilador de HTML de Angular que inyecten comportamiento a un elemento.
• Tipos de directivas:
  • Definidas como elemento (<mi-directiva></mi-directiva>)
  • Definidas como atributos (<div mi-directiva="val"></div>)
  • Definidas como clase (<img class="mi-directiva: val"/>)
• La declaración de una directiva debería retornar un objeto con las diferentes opciones que le digan a $compile como debería comportarse la directiva.

Directivas

template y templateUrl (opcionales)

angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.customer = {
    name: 'Naomi',
    address: '1600 Amphitheatre'
  };
}])
.directive('myCustomer', function() {
  return {
    template: 'Name: {{customer.name}} Address: {{customer.address}}'
  };
});

Definen el HTML que representa a esta directiva.

Directivas

restrict (opcional)

angular.module('docsRestrictDirective', [])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    templateUrl: 'my-customer.html'
  };
});

Define el tipo de directiva que vamos a crear

• 'A' Sólo como atributo
• 'E' Sólo como elemento
• 'C' Sólo como clase

Por defecto, el valor es 'AE'

Directivas

scope (opcional)

angular.module('docsRestrictDirective', [])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
      customerInfo: '=info'
    },
    templateUrl: 'my-customer-iso.html'
  };
});

Permite encapsular el scope de la directiva.

Directivas

link (opcional)

Se utiliza cuando la directiva va a manipular el DOM.

link debe ser una función del siguiente tipo:

function link(scope, element, attrs, controller, transcludeFn) { ... }

Directivas

link (opcional)

angular.module('docsRestrictDirective', [])
.directive('myCurrentTime', ['$interval', 'dateFilter', function($interval, dateFilter) {

  function link(scope, element, attrs) {
    var format,
        timeoutId;

    function updateTime() {
      element.text(dateFilter(new Date(), format));
    }

    scope.$watch(attrs.myCurrentTime, function(value) {
      format = value;
      updateTime();
    });

    element.on('$destroy', function() {
      $interval.cancel(timeoutId);
    });

    // start the UI update process; save the timeoutId for canceling
    timeoutId = $interval(function() {
      updateTime(); // update DOM
    }, 1000);
  }

  return {
    link: link
  };
}]);

Directivas

transclude (opcional)

angular.module('docsTransclusionDirective', [])
.directive('myDialog', function() {
  return {
    restrict: 'E',
    transclude: true,
    templateUrl: 'my-dialog.html'
  };
});

Permite obtener el contenido de la directiva, y colocarlo en otra parte específica (indicada con la directiva ng-transclude dentro de nuestro template)

<div class="alert" ng-transclude>
</div>