Javascript Girl
  1. Javascript Girl
  3. Utilisation de méthodes auxiliaires lors de la mise en page avec JS angulaire
Intereting Posts
Est-ce que l'extension de chrome api prend en charge les téléchargements directement à partir du cache de navigation? Comparez les éléments de deux tableaux par Id et supprimez les éléments du tableau qui ne sont pas présentés dans l'autre Génération de la séquence de Fibonacci Stack navigator me donne une erreur indéfinie Fonction de liaison angulaire: $ Portée vs portée Utiliser la même fonction dans chaque appel d'objet Symfony2.6: créez un formulaire ajax dynamique pour remplir dynamiquement la liste déroulante Changement de hauteur animé sur Bootstrap 3 Carousel Nombre inconnu de sous-listes avec AngularJS Trier le tableau par date donne des résultats inattendus Déterminez quel élément a soumis un formulaire à partir de l'inscription Ralentissez vers le haut de l'événement par jQuery animate Ember.js: récupérer l'élément aléatoire d'une collection Utilisation de la variable en dehors de la fonction de rappel Ajax Page principale en mode standard, iframe en mode compatibilité: tous les problèmes?

Utilisation de méthodes auxiliaires lors de la mise en page avec JS angulaire

Actuellement en train de convertir un site Web de son précédent modèle à Angular. Dans le processus de planification précédent que nous utilisions, nous avons pu appeler des méthodes auxiliaires pour afficher correctement les données. Par exemple: 

<script type="text/javascript"> $.views.helpers({ parseDate: function (jsonDate) { if (jsonDate != null) { var newDate = Utils.PrettyDate(Utils.ConvertJsonDateToJsDate(jsonDate)); return newDate; } } }); </script> <div class="post-info"> <span class="posted-date">Posted {{:~parseDate(CreatedDate)}}</span>&nbsp|&nbsp<span>{{:ReplyCount}} Replies</span> </div>

C'était très agréable. En essayant de trouver une façon d'utiliser le même type de fonctionnalité avec Angular en tant que modèle, va. Est-il possible de faire quelque chose de similaire? Si c'est le cas, comment?

Vous ajoutez simplement la méthode à votre contrôleur. Quelque chose comme ça: 

 <div class="post-info" ng-controller="MyCtrl"> <span class="posted-date">Posted {{parseDate(CreatedDate)}}</span> </div>

Ensuite, le contrôleur: 

 function MyCtrl($scope) { $scope.parseDate = function(jsonDate) { //date parsing functionality return newParsedDate; } }

Si vous n'êtes intéressé que par l'affichage des données, puis, comme pkozlowski.opensource déjà mentionné, les filtres sont la «voie angulaire» du formatage des données pour l'affichage. Si le filtre de date existant n'est pas suffisant, je suggère un filtre personnalisé. Ensuite, votre HTML sera plus "angulaire": 

 <span class="posted-date">Posted {{CreatedDate | dateFormatter}}</span>

La syntaxe ci-dessus précise que vous êtes (seulement) le formatage.

Voici un filtre personnalisé: 

 angular.module('OurFormatters', []). filter('dateFormatter', function() { // filter is a factory function return function(unformattedDate, emptyStrText) { // first arg is the input, rest are filter params // ... add date parsing and formatting code here ... if(formattedDate === "" && emptyStrText) { formattedDate = emptyStrText; } return formattedDate; } });

En encapsulant nos filtres / formateurs dans un module, il est également plus facile de les (re) utiliser dans plusieurs contrôleurs – chaque contrôleur qui en a besoin vient d'injecter OurFormatters.

Un autre avantage des filtres est qu'ils peuvent être enchaînés. Donc, si un jour vous décidez que, dans certains endroits de votre application, les dates vides ne devraient pas montrer que rien (soit vide) alors que dans d'autres endroits de votre application, les dates vides devraient indiquer «TBD», un filtre pourrait résoudre ce dernier: 

 <span class="posted-date">Posted {{CreatedDate | dateFormatter | tbdIfEmpty}}</span>

Ou votre filtre personnalisé peut prendre un ou plusieurs arguments (l'exemple ci-dessus supporte un argument): 

 <span class="posted-date">Posted {{CreatedDate | dateFormatter:'TBD'}}</span>

En regardant le cas d'utilisation présenté, votre meilleur appel serait le filtre de date décrit ici: http://docs.angularjs.org/api/ng.filter:date En utilisant ce filtre, vous pouvez écrire: 

 {{CreatedDate | date}}

Le filtre mentionné est personnalisable afin que vous puissiez utiliser différents formats de date, etc.

D'une manière générale, les filtres sont très agréables pour l'encapsulation de la fonction de mise en forme des fonctionnalités / UI helper. En savoir plus sur la création de filtres ici: http://docs.angularjs.org/guide/dev_guide.templates.filters.creating_filters

Les filtres sont agréables et s'adaptent à de nombreux cas d'utilisation, mais si vous utilisez simplement une fonction dans votre modèle, il est possible. Il suffit de définir une fonction dans une portée et vous êtes prêt à l'utiliser directement dans votre modèle: 

 {{doSomething(CreatedDate)}}

Où doSomething doit être défini sur une portée (une courante ou une des étendues parentales): 

 function MyCtrl($scope) { $scope.doSomthing = function(argument){ //ui helper logic here } }