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相同类型的功能进行模板化。有可能做类似的事情吗？如果是这样的话？

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

Answer 2

查看提供的用例，您最好的电话将是此处描述的日期过滤器：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
    }    
}

使用Angular JS进行模板化时使用辅助方法

2 个答案: