Использование вспомогательных методов при шаблонизации с помощью Angular JS

В настоящее время в процессе преобразования веб-сайта с его предыдущего шаблона на Angular. В предыдущем процессе шаблонов, который мы использовали, мы смогли вызвать вспомогательные методы для корректного отображения данных. Например:

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

Это было очень приятно. Попытка выяснить способ использования одного и того же типа функций с Angular в том, что касается шаблонов. Можно ли сделать что-то подобное? Если да, то как?

Ответы

Ответ 1

Вы просто добавляете метод к контроллеру. Что-то вроде этого:

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

Затем контроллер:

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

Ответ 2

Если вас интересует только отображение данных, то, как уже упоминалось, pkozlowski.opensource, фильтры - это "Angular способ" форматирования данных для отображения. Если существующий фильтр даты недостаточен, я предлагаю настраиваемый фильтр. Тогда ваш HTML будет выглядеть более "angular":

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

Вышеприведенный синтаксис дает понять, что вы (только) форматирование.

Здесь пользовательский фильтр:

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

Инкапсулируя наши фильтры /formatters в модуль, также легче (re) использовать их в нескольких контроллерах - каждый контроллер, который нуждается в них, просто вводит OurFormatters.

Другим преимуществом фильтров является то, что они могут быть скованы цепью. Поэтому, если когда-нибудь вы решите, что в некоторых местах вашего приложения пустые даты не должны показывать ничего (быть пустым), тогда как в других местах вашего приложения пустые даты должны показывать "TBD", фильтр может решить последнее:

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

Или ваш настраиваемый фильтр может принимать один или несколько аргументов (приведенный выше пример поддерживает аргумент):

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

Ответ 3

Рассматривая представленный вариант использования, лучшим выбором будет фильтр даты, описанный здесь: http://docs.angularjs.org/api/ng.filter:date С помощью этого фильтра вы можете написать:

{{CreatedDate | date}}

Указанный фильтр настраивается, поэтому вы можете использовать разные форматы дат и т.д.

Вообще говоря, фильтры очень приятны для инкапсуляции функций логики форматирования/вспомогательного интерфейса. Подробнее о создании фильтров здесь: http://docs.angularjs.org/guide/dev_guide.templates.filters.creating_filters

Фильтры хороши и подходят для многих случаев использования, но если вы просто используете любую функцию в своем шаблоне, это возможно. Просто определите функцию в области и вы готовы использовать ее непосредственно в своем шаблоне:

{{doSomething(CreatedDate)}}

где doSomething необходимо определить в области (текущей или одной из родительских областей):

function MyCtrl($scope) {

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