Uso de métodos auxiliares al crear plantillas con Angular JS

Question

Actualmente en el proceso de convertir un sitio web de su plantilla anterior a Angular. En el proceso de creación de plantillas anterior que usábamos, pudimos llamar a los métodos de ayuda para mostrar los datos correctamente. Por ejemplo:

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

Esto fue muy agradable. Tratando de encontrar la manera de utilizar el mismo tipo de funcionalidad con Angular en lo que respecta a la creación de plantillas. ¿Es posible hacer algo similar? ¿Si es así, cómo?

Answer 1

Simplemente agregue el método a su controlador. Algo como esto:

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

continuación, el controlador:

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

Answer 2

Mirando el caso de uso presentado su mejor llamada sería el filtro de fecha describe aquí: http://docs.angularjs.org/api/ng.filter:date El uso de este filtro se podría escribir:

{{CreatedDate | date}} 

El filtro mencionado es personalizable, por lo que puede usar diferentes formatos de fecha, etc.

En general, los filtros son muy buenos para encapsular las funciones de lógica de interfaz/ayuda de UI. Más sobre cómo crear filtros aquí: http://docs.angularjs.org/guide/dev_guide.templates.filters.creating_filters

Los filtros son agradables y se ajustan a muchos casos de uso, pero si simplemente después de usar cualquier función en su plantilla es posible. Basta con definir una función en un ámbito y que esté listo para usarlo directamente en su plantilla:

{{doSomething(CreatedDate)}} 

donde doSomething necesita ser definido en un ámbito de aplicación (una corriente de uno o uno de los ámbitos de los padres):

function MyCtrl($scope) { 

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

Answer 3

Si solo está interesado en la visualización de datos, entonces como pkozlowski.opensource ya mencionado, los filtros son la "forma angular" de formatear los datos para su visualización. Si el filtro de fecha existente no es suficiente, sugiero un filtro personalizado. A continuación, el código HTML se verá más "angular":

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

La sintaxis anterior deja claro que eres el formato (sólo).

Aquí hay un filtro personalizado:

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; 
    } 
}); 

Al encapsular los filtros/formateadores en un módulo, también es más fácil de (re) los utilizan en varios controladores - cada controlador que necesita ellos sólo inyecta OurFormatters.

Otro beneficio de los filtros es que se pueden encadenar.Así que si algún día decide que en algunos lugares de su aplicación para las fechas vacías deberían mostrar nada (en blanco), mientras que en otros lugares en su aplicación fechas vacíos deben mostrar 'TBD', un filtro podría resolver este último:

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

o su filtro personalizado puede tener uno o más argumentos (el ejemplo anterior es compatible con un argumento):

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