电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 精通 MEAN 当 MEAN 遇到 Meetup.com 和微数据（6） [打印本页]

作者: look_w 时间: 2018-11-13 18:45 标题: 精通 MEAN 当 MEAN 遇到 Meetup.com 和微数据（6）

添加 AngularJS 过滤器AngularJS  （与相机或 Instagram       滤镜很像）可改变数据的外观。向视图添加过滤器，因为它们会影响模型数据的外观，而不更改内容本身。
通过在数据元素后添加一个竖线 (|) 和一个过滤器名称，如 {{product_code | uppercase}}       所示，可向模板占位符应用一个过滤器。AngularJS 提供了许多内置的过滤器，包括       uppercase、lowercase、currency 和       number。您甚至可编写自己的自定义过滤器。
我一直使用的一个过滤器是       过滤器，它使您能够使用自定义模式来格式化日期值的外观。
例如，向之前创建的 time 元素应用一个 date 过滤器：

1
2
3
4

<time class="event-date"
  itemprop="startDate"
  datetime="{{event.time | date:'yyyy-MM-ddTHH:mm:ss:Z'}}">{{event.time |
  date:'EEEE, MMMM, d, yyyy'}}</time>

可以注意到，您为两个不同的过滤器使用了同一个 event.time 字段。EEEE 代码显示星期几的完整英文，比如 Monday。EEE 代码将星期几缩写为 Mon；EE 缩写为 Mo；E 缩写为 M。M 代码同样适用于月份名称。d 代码适用于一月中的某一天，y 代码适用于年。
event.time 字段会在主页上出现多次。更改 When 的外观以显示小时和 AM/PM 后缀：

1 2	<h4>When</h4> <p>{{event.time \| date:'h a'}}</p>

MEAN 应用程序中对 AngularJS 过滤器的大量使用，突出了 MVC 设计模式的一个重要原则：模型数据应与任何视图内容独立。
有了正确的 event.time 格式之后，仅剩下 event.description 外观需要修复了。为此，必须让       AngularJS 知道它可安全地显示此字段的未转义 HTML。
显示未转义的 HTML目前为止使用的所有 JSON 数据都是纯数据，即没有嵌套的 HTML 元素。event.description 字段是一个例外。
任何时候您从外部来源收到 HTML（无论是否值得信任）时，都面临着一种潜在的安全风险。包含的 HTML 可带来不想要的 JavaScript       库，它们可能向其他网站公开您的数据。
为了防御此风险，AngularJS 会自动清理模板化数据，将它遇到的任何 HTML 元素进行转义，将 “真实的” 尖括号替换为转义的等效表示       > 和 <。此行为不是像前一节中看到的那样的显式过滤，但是一种类似的理念。
对于 event.description 字段，必须告诉 AngularJS，一起显示外部 HTML 和本地 HTML       是没有问题的。为此，调整您的模板，删除 {{event.description}} 占位符并将它替换为属性：

1	<div class="col-md-8" itemprop="description" ng-bind-html="event.description"></div>

在浏览器中查看主页时，可见的、转义的 <b> 和 <p> HTML 元素应消失，取而代之的是呈现的文本。
有了控制器、模型和视图，还剩最后一步：将控制器中的模拟 JSON 内容替换为从 Ajax 请求返回的实时数据。要执行这一步，需要向模块添加另一个元素：一个服务。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)