使用辅助方法在Angular JS模板中进行编码

Question

目前正在将一个网站从之前的模板转换为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进行模板设计的相似方法。是否有可能做到类似的功能？如果可以，应该怎么做？

- yaegerbomb

Answer 1

如果您只对数据显示感兴趣，那么如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;
   }
 });

通过将我们的过滤器/格式化程序封装到一个模块中，也更容易在多个控制器中重复使用它们--每个需要它们的控制器只需注入 OurFormatters。

滤镜的另一个好处是它们可以被链接起来。因此，如果有一天你决定在应用程序的某些地方空日期应该不显示任何内容（为空白），而在应用程序的其他地方空日期应该显示“TBD”，则滤镜可以解决后者：

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

或者您的自定义过滤器可以接受一个或多个参数（上面的示例支持一个参数）：

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

- Mark Rajcok

Answer 2

你只需将方法添加到你的控制器中，就像这样：

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

- dnc253

Answer 3

看完这个用例后，你最好使用这里描述的日期过滤器：http://docs.angularjs.org/api/ng.filter:date。使用这个过滤器，你可以编写如下代码：

{{CreatedDate | date}}

提到的过滤器是可定制的，因此您可以使用不同的日期格式等。

一般来说，过滤器非常适合封装格式化逻辑/ UI助手函数。有关创建过滤器的更多信息，请参见：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
    }    
}

- pkozlowski.opensource

---

我最初尝试使用过滤器。问题在于模型返回的是/Date("jsondatestring")而不仅仅是组成日期的数字。这就是为什么我想知道是否有一种使用函数的方法。感谢您提供了两种方法。 - yaegerbomb

实现了过滤器方法，非常干净。谢谢！ - Benny