javascript - 来自不属于范围的模板的Angular JS调用函数

Question

这听起来可能很奇怪，但我有一个看起来像这样的中继器。

<tr ng-repeat="task in tasks">
    <td>{{getFriendlyDate(date)}}</td>
</tr>

我可以像这样把这个函数放在作用域上。

$scope.getFriendlyDate = function(date){

    /* Code to convert ISO date to readable date */
    return date;

};

这很好用，但我需要在很多模板中使用这个函数，所以我不想将它复制并粘贴到很多 Controller 中。

一个选择是创建一个服务来执行此操作，并在每个 Controller 的作用域上放置一个简单的包装器，但这不会为我节省太多时间。

另一种选择是将函数放在根范围内并直接在我的模板中访问它，但我更喜欢它存在于我的实用程序库中(我有一个使用工厂创建的 $utils 库)。

我想知道是否可以调用服务直接从模板进行日期转换？

Answer 1

听起来你想要一个过滤器。创建过滤器一次:

angular.module("myModule").filter('friendlyDate', function() {
     return function(date) {
          /* Code to convert ISO date to readable date */
          return date;
     };
});

然后在你的 HTML 中无处不在:

<tr ng-repeat="task in tasks">
    <td>{{date | friendlyDate}}</td>
</tr>