• 定制过滤器
  • 模板
  • 测试
  • 练习
  • 总结

    在这一步你将学习到如何创建自己的显示过滤器。

    请重置工作目录:

    1. git checkout -f step-9

    现在转到一个手机详细信息页面。在上一步,手机详细页面显示“true”或者“false”来说明某个手机是否具有特定的特性。现在我们使用一个定制的过滤器来把那些文本串图形化:√作为“true”;以及×作为“false”。来让我们看看过滤器代码长什么样子。

    步骤8和步骤9之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。

    定制过滤器

    为了创建一个新的过滤器,先创建一个phonecatFilters模块,并且将定制的过滤器注册给这个模块。

    app/js/filters.js

    1. angular.module('phonecatFilters', []).filter('checkmark', function() {
    2. return function(input) {
    3. return input ? '\u2713' : '\u2718';
    4. };
    5. });

    我们的过滤器命名为checkmark。它的输入要么是true,要么是false,并且我们返回两个表示true或false的unicode字符(\u2713和\u2718)。

    现在我们的过滤器准备好了,我们需要将我们的phonecatFilters模块作为一个依赖注册到我们的主模块phonecat上。

    app/js/app/js

    1. ...
    2. angular.module('phonecat', ['phonecatFilters']).
    3. ...

    模板

    由于我们的模板代码写在app/js/filter.js文件中,所以我们需要在布局模板中引入这个文件。

    app/index.html

    1. ...
    2. <script src="js/controllers.js"></script>
    3. <script src="js/filters.js"></script>
    4. ...

    在AngularJS模板中使用过滤器的语法是:

    1. {{ expression | filter }}

    我们把过滤器应用到手机详细信息模板中:

    app/partials/phone-detail.html

    1. ...
    2. <dl>
    3. <dt>Infrared</dt>
    4. <dd>{{phone.connectivity.infrared | checkmark}}</dd>
    5. <dt>GPS</dt>
    6. <dd>{{phone.connectivity.gps | checkmark}}</dd>
    7. </dl>
    8. ...

    测试

    过滤器和其他组件一样,应该被测试,并且这些测试实际上很容易完成。

    test/unit/filtersSpec.js

    1. describe('filter', function() {
    2. beforeEach(module('phonecatFilters'));
    3. describe('checkmark', function() {
    4. it('should convert boolean values to unicode checkmark or cross',
    5. inject(function(checkmarkFilter) {
    6. expect(checkmarkFilter(true)).toBe('\u2713');
    7. expect(checkmarkFilter(false)).toBe('\u2718');
    8. }));
    9. });
    10. });

    注意在执行任何过滤器测试之前,你需要为phonecatFilters模块配置我们的测试注入器。

    执行./scripts/test/sh运行测试,你应该会看到如下的输出:

    1. Chrome: Runner reset.
    2. ....
    3. Total 4 tests (Passed: 4; Fails: 0; Errors: 0) (3.00 ms)
    4. Chrome 19.0.1084.36 Mac OS: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3.00 ms)

    练习

    • 现在让我们来练习一下AngularJS内置过滤器,在index.html中加入如下绑定:

      • {{ "lower cap string" | uppercase }}
      • {{ {foo: "bar", baz: 23} | json }}
      • {{ 1304375948024 | date }}
      • {{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}
    • 我们也可以用一个输入框来创建一个模型,并且将之与一个过滤后的绑定结合在一起。在index.html中加入如下代码:

      Uppercased: {{ userInput | uppercase }}

    总结

    现在你已经知道了如何编写和测试一个定制化插件,在步骤10中我们会学习如何用AngularJS继续丰富我们的手机详细信息页面。