javascript - rutas - Usando métodos de ayuda mientras se está creando plantillas con Angular JS

ng-view ejemplo

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 estábamos usando, 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 bonito. Intentar encontrar una manera de utilizar el mismo tipo de funcionalidad con Angular en cuanto a plantillas. ¿Es posible hacer algo similar? ¿Si es así, cómo?

Answer 1

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

{{CreatedDate | date}}

El filtro mencionado es personalizable para que pueda usar diferentes formatos de fecha, etc.

En términos generales, los filtros son muy útiles para encapsular las funciones de la lógica de formato / ayudante de UI. Más sobre la creación de filtros aquí: http://docs.angularjs.org/guide/dev_guide.templates.filters.creating_filters

Los filtros son agradables y se adaptan a muchos casos de uso, pero si está simplemente después de usar cualquier función en su plantilla, es posible. Simplemente defina una función en un ámbito y estará listo para usarla directamente en su plantilla:

{{doSomething(CreatedDate)}}

donde doSomething debe definirse en un ámbito (uno actual o uno de los ámbitos primarios):

function MyCtrl($scope) {

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

Answer 2

Si solo está interesado en la visualización de datos, entonces, como pkozlowski.opensource ya se mencionó, los filtros son la "forma angular" de formato de datos para la visualización. Si el filtro de fecha existente no es suficiente, sugiero un filtro personalizado. Entonces tu HTML se verá más "angular":

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

La sintaxis anterior deja claro que estás (solo) el formato.

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 nuestros filtros / formateadores en un módulo, también es más fácil (re) usarlos en varios controladores: cada controlador que los necesita solo inyecta OurFormatters.

Otro beneficio de los filtros es que se pueden encadenar. Entonces, si algún día decides que en algunos lugares de la aplicación, las fechas vacías no deberían mostrar nada (estar en blanco), mientras que en otros lugares de la aplicación, las fechas vacías deberían mostrar ''TBD'', un filtro podría resolver esto:

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

O su filtro personalizado puede tomar uno o más argumentos (el ejemplo anterior admite un argumento):

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

Answer 3

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>

Luego el controlador:

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