19

目前正在将网站从以前的模板转换为 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 相同类型的功能。有没有可能做类似的事情？如果有怎么办？

4

3 回答 3

33

如果您只对数据显示感兴趣，那么正如 pkozlowski.opensource 已经提到的，过滤器是格式化数据以进行显示的“Angular 方式”。如果现有的日期过滤器不够用，我建议使用自定义过滤器。然后你的 HTML 会看起来更“有棱角”：

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

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

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

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

<span class="posted-date">Posted {{CreatedDate | dateFormatter:'TBD'}}</span>
于 2012-09-18T18:19:08.263 回答
32

您只需将该方法添加到您的控制器。像这样的东西：

<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;
     }
}
于 2012-09-17T20:55:58.850 回答
7

查看呈现的用例，您最好的调用将是此处描述的日期过滤器：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
    }    
}
于 2012-09-17T20:58:16.790 回答