Articles avec #angular tag

Publié le 7 Mai 2015

Maintenant qu'on sait comment télécharger un template angular il va falloir le traiter ou le compiler. C'est à dire remplacer toutes les doubles accolades {{}} par les valeurs correspondantes.

Cela se fait en 2 étapes:

  1. La compilation qui va produite une fonction qui pourra être utilisée pour générer un element HTML en lui passant un contexte ou scope.
  2. La liaison où on utilise la fonction précédente pour lier un élément HTML à un scope

Ce qui donne:

// html est une string contenant un template html
var bind = $compile(angular.element(html));
var element = bind($scope);

ou en une seule ligne:

var element = $compile(angular.element(html))($scope);

Si au lieu d'un élément HTML on a besoin d'une string on peut utiliser $interpolate au lieu de $compile.

 

Voir les commentaires

Rédigé par Bliz

Publié dans #angular

Repost 0

Publié le 7 Mai 2015

Un template angular n'est rien de plus qu'un fichier html.

On peut donc le télécharge facilement à l'aide du service $http.

$http.get('mon/template.html', {cache: $templateCache});

L'astuce consiste à bien préciser de cacher le template avec $templateCache de sorte que le template soit dispo dans le cache et qu'on évite des téléchargement superflus.

 

Voir les commentaires

Rédigé par Bliz

Publié dans #angular

Repost 0

Publié le 19 Janvier 2015

Si vous avez remarqué angular fournit une directive ng-click qui permet de configurer une action à exécuter lors d'un click utilisateur sur un élément.

En revanche il n'y a pas de directive ng-clickout qui permettrait de configurer une action lors d'un click utilisateur hors de cet élément.

Il y a ng-blur qui correspond à ce cas d'utilisation mais il ne s'applique pas sur les div.

 

Heureusement la création d'une directive ng-clickout s'avère assez simple si on utilise la function link et un peu de jqlite.

angular.module('monApplication')
   .directive('ngClickout', ['$document', function ($document) {
      return {
         restrict: 'A', // ng-clickout n'est disponible qu'en tant qu'attribute
         link: function (scope, element, attr) {
            element.bind('click', function (event) {
               event.stopPropagation(); // stop propagation pour ne pas rentrer dans le $document.click event
            });
           
            $document.bind('click', function () {
               // on a un click hors de l'élément donc on exécute la fonction définie dans l'attribut ng-clickout
               scope.$apply(attr.ngClickout);
            });
         }
      };
}]);

 

L'astuce consiste à utiliser event.stopPropagation() sur l'élément en question. Cela permet d'être sûr que le gestionnaire de click sur le document reçoit tous les clics sauf ceux sur l'élément où est appliqué ng-clickout.

 

La seconde astuce consiste à utiliser scope.$apply qui permet d'exécuter la fonction passée dans ng-clickout et de mettre à jour le scope angular et donc de mettre à jour tous les bindings angular.

Voir les commentaires

Rédigé par Bliz

Publié dans #angular

Repost 0