javascript - Angular JS : Using filter/directive to modify the generated output

Question

在我的应用程序中，我有不同的任务，每个任务都有一个截止日期，可能如下所示:

Jun 6, 2014
Apr 12, 2014 @ 1pm
Daily @ 1pm

在我看来，我正在使用 ng-repeat显示任务及其相关信息。我的ng-repeat如下所示:

  <ul class="tasks">
   <li class="single-task">
       <span class="task-title">{{task.title}}</span>
       <span class="task-duedate">{{task.dueDate}}</span>
   </li>

我想要的是以不同方式显示日期，即不是以存储方式显示日期，而是希望在 <span class="task-duedate"></span> 中呈现日期。像下面这样:

<span class="task-duedate">
    <span class="date-daymon">Apr 12</span>
    <span class="date-year">2014</span>
    <span class="date-time">1 pm</span>
</span>

所以，我创建并应用了一个 filter称为 NormalizeDateTime

<span class="task-duedate">{{task.dueDate | NormalizeDateTime }}</span>

生成所需的 html 并返回它。

app.filter('NormalizeDate', function(){
return function( input ) {
        ...
        ...
        return '<span..>' + date + '</span><span..>' + year + '</span><span..>' + time + '</span>';
    };
});

现在我遇到的问题是 Angular 问题，而不是让浏览器呈现返回的 html，而是按原样显示过滤器返回的日期部分，即以纯文本的形式。现在的问题是，如何让它呈现 NormalizeDateTime 返回的文本？过滤为html？

P.S 我也试过三重括号 {{{task.dueDate | NormalizeDateTime}}} ，正如我们在 HandlebarsJS 中所做的那样，但这也不起作用。

更新我尝试使用自定义指令实现相同的目的:

<span class="task-content group cursor-text group left">
    <span class="task-text cursor-text">{{task.title}}</span>
    <span class="task-trackedtime right">{{task.trackedTime}}</span>
    <span class="task-datetime right" duedate="{{task.dueDate}}"></span>
</span>

下面是我的指令的样子:

app.directive('duedate', [function () {
    return {
        restrict: 'A',
        // transclude: true,
        replace: true,
        template: '<span class="task-datetime right">{{dat}}</span>',
        link: function (scope, iElement, iAttrs) {
            // scope.dat = 'Testing Date';
            console.log(iAttrs.duedate);
        }
    };
}])

但我无法访问 iAttrs . duedate在link里面我的指令。为什么会这样？

Answer 1

我也遇到了过滤器无法生成 HTML 并恢复为指令的问题。

我建议对您的指令进行一些小改动，即添加一个范围定义，如下所示:

app.directive('duedate', [function () {
    return {
        restrict: 'A',
        replace: true,
        scope: {
            dat: '@duedate'
        },
        template: '<span class="task-datetime right">{{dat}}</span>',
        link: function (scope, iElement, iAttrs) {
            // scope.dat = 'Testing Date';
            console.log(scope.dat);
        }
    };
}])

通过添加 scope: { dat: '@duedate' } 您指定指令的范围 dat 属性应设置为 duedate 的解释值 属性。