先來(lái)回顧一下 ng 中的一些概念：

• module ，代碼的組織單元，其它東西都是在定義在具體的模塊中的。
• app ，業(yè)務(wù)概念，可能會(huì)用到多個(gè)模塊。
• service ，僅在數(shù)據(jù)層面實(shí)現(xiàn)特定業(yè)務(wù)功能的代碼封裝。
• controller ，與 DOM 結(jié)構(gòu)相關(guān)聯(lián)的東西，即是一種業(yè)務(wù)封裝概念，又體現(xiàn)了項(xiàng)目組織的層級(jí)結(jié)構(gòu)。
• filter ，改變輸入數(shù)據(jù)的一種機(jī)制。
• directive ，與 DOM 結(jié)構(gòu)相關(guān)聯(lián)的，特定功能的封裝形式。

上面的這幾個(gè)概念基本上就是 ng 的全部。每一部分都可以自由定義，使用時(shí)通過(guò)各要素的相互配合來(lái)實(shí)現(xiàn)我們的業(yè)務(wù)需求。

我們從最開(kāi)始一致打交道的東西基本上都是 controller 層面的東西。在前面，也介紹了 module 和 service 的自定義。剩下的會(huì)介紹 filter 和 directive 的定義。基本上這幾部分的定義形式都是一樣的，原理上是通過(guò) provider 來(lái)做注入形式的聲明，在實(shí)際操作過(guò)程中，又有很多 shortcut 式的聲明方式。

過(guò)濾器的自定義是最簡(jiǎn)單的，就是一個(gè)函數(shù)，接受輸入，然后返回結(jié)果。在考慮過(guò)濾器時(shí)，我覺(jué)得很重要的一點(diǎn)： 無(wú)狀態(tài) 。

具體來(lái)說(shuō)，過(guò)濾器就是一個(gè)函數(shù)，函數(shù)的本質(zhì)含義就是確定的輸入一定得到確定的輸出。雖然 filter 是定義在 module 當(dāng)中的，而且 filter 又是在 controller 的 DOM 范圍內(nèi)使用的，但是，它和具體的 module ， controller ， scope 這些概念都沒(méi)有關(guān)系（雖然在這里你可以使用 js 的閉包機(jī)制玩些花樣），它僅僅是一個(gè)函數(shù)，而已。換句話說(shuō)，它沒(méi)有任何上下文關(guān)聯(lián)的能力。

過(guò)濾器基本的定義方式：

var app = angular.module('Demo', [], angular.noop);
app.filter('map', function(){
  var filter = function(input){
    return input + '...';
  };
  return filter;
});

上面的代碼定義了一個(gè)叫做 map 的過(guò)濾器。使用時(shí)：

<p>示例數(shù)據(jù): {{ a|map }}</p>

過(guò)濾器也可以帶參數(shù)，多個(gè)參數(shù)之間使用 : 分割，看一個(gè)完整的例子：

<div ng-controller="TestCtrl">
<p>示例數(shù)據(jù): {{ a|map:map_value:'>>':'(no)' }}</p>
<p>示例數(shù)據(jù): {{ b|map:map_value:'>>':'(no)' }}</p>
</div>


<script type="text/javascript">

var app = angular.module('Demo', [], angular.noop);
app.controller('TestCtrl', function($scope){
  $scope.map_value = {
    a: '一',
    b: '二',
    c: '三'
  }
  $scope.a = 'a';
});

app.filter('map', function(){
  var filter = function(input, map_value, append, default_value){
    var r = map_value[input];
    if(r === undefined){ return default_value + append }
    else { return r + append }
  };
  return filter;
});

angular.bootstrap(document, ['Demo']);
</script>