AngularJS 是一个流行的前端 JavaScript 框架，它提供了很多有用的功能来帮助我们构建单页应用程序（SPA）。其中 Filter 和 Directive 是两个非常重要的概念，它们可以帮助我们更好地组织和管理我们的代码，提高代码的可读性和可维护性。
Filter
Filter 是 AngularJS 中的一个非常有用的概念，它可以帮助我们对数据进行格式化和转换。在 AngularJS 中，我们可以使用内置的 Filter，也可以自定义 Filter。
内置 Filter
AngularJS 中内置了很多有用的 Filter，包括以下几种：
currency：将数值转换为货币格式。date：将日期转换为指定格式。json：将 JavaScript 对象转换为 JSON 字符串。lowercase：将字符串转换为小写。uppercase：将字符串转换为大写。limitTo：限制数组或字符串的长度。orderBy：按照指定的属性对数组进行排序。
以下是一个使用内置 Filter 的示例代码：
-- -------------------- ---- -------
----- ----- - -------- ------
----- ---- - ----------------- ------
----- --- - ---- ------
----- --- - --------- ------
----- --- - --------- ------
----
--- --------------- -- ----- - ------------- ---- -------
-----
-------
--- --------------- -- ----- - ----------------
------ --------- -------
------ ---------- - -------- -------
-----
--------自定义 Filter
除了使用内置 Filter，我们还可以自定义 Filter 来满足我们的需求。自定义 Filter 可以接收一个或多个参数，并返回处理后的结果。
以下是一个自定义 Filter 的示例代码：
angular.module('myApp', [])
.filter('reverse', function() {
return function(input) {
return input.split('').reverse().join('');
};
});在上面的代码中，我们定义了一个名为 reverse 的 Filter，它接收一个字符串作为参数，并返回将该字符串反转后的结果。我们可以在 HTML 中使用该 Filter，如下所示：
<p>{{ str | reverse }}</p>Directive
Directive 是 AngularJS 中的另一个重要概念，它可以帮助我们扩展 HTML 和 DOM，实现更加复杂的功能。在 AngularJS 中，我们可以使用内置的 Directive，也可以自定义 Directive。
内置 Directive
AngularJS 中内置了很多有用的 Directive，包括以下几种：
ng-app：定义应用程序的根元素。ng-controller：定义应用程序的控制器。ng-model：将表单元素和数据模型进行绑定。ng-repeat：循环遍历数组或对象。ng-show和ng-hide：控制元素的显示和隐藏。ng-click：定义元素的点击事件。ng-submit：定义表单的提交事件。
以下是一个使用内置 Directive 的示例代码：
-- -------------------- ---- -------
---- -------------- -----------------------
------ ----------- ----------------
--------- -- ---- -------
----
--- --------------- -- --------- ---- -------
-----
------- ------------------------ -------------
----- -------------------------
------ ----------- --------------------
------ --------------- --------------------
------- -----------------------------
-------
------自定义 Directive
除了使用内置 Directive，我们还可以自定义 Directive 来扩展 HTML 和 DOM。自定义 Directive 可以包含多个钩子函数，如 compile、link、controller 等，用于实现不同的功能。
以下是一个自定义 Directive 的示例代码：
-- -------------------- ---- -------
----------------------- ---
------------------------- ---------- -
------ -
--------- ----
--------- -------- ------- ----------
----- --------------- -------- ------ -
------------- - ------- - - ---------- - ----
-
--
---在上面的代码中，我们定义了一个名为 myDirective 的 Directive，它包含一个模板和一个 link 钩子函数。当该 Directive 被使用时，它会在模板中显示一个消息，该消息会根据使用该 Directive 时传入的属性 name 动态生成。我们可以在 HTML 中使用该 Directive，如下所示：
<my-directive name="John"></my-directive>
总结
在本文中，我们介绍了 AngularJS 中 Filter 和 Directive 的应用，包括内置 Filter 和 Directive、自定义 Filter 和 Directive，以及它们的使用方法和示例代码。通过学习本文，读者可以更好地理解 AngularJS 的核心概念，提高代码的可读性和可维护性，从而更好地开发 SPA 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6513ecc795b1f8cacdc63a2c