CreatingaCustomDirectiveforWordPressPostListingontheFrontEnd

在本系列的前一部分中，我们引导了AngularJS应用程序，为不同视图配置了路由，并围绕帖子、用户和类别的路由构建了服务。使用这些服务，我们现在终于能够从服务器获取数据来为前端提供动力。

在本系列的这一部分中，我们将致力于为帖子列表功能构建自定义AngularJS指令。在本系列的当前部分中，我们将：

• 介绍AngularJS指令以及为什么我们应该创建一个
• 规划帖子列表功能的指令及其所需的参数
• 为帖子列表创建自定义AngularJS指令及其模板

所以让我们首先介绍一下AngularJS指令以及为什么我们需要它们。

AngularJS指令简介

AngularJS中的指令是一种修改HTML元素行为和重用可重复代码块的方法。它们可用于修改HTML元素及其子元素的结构，因此它们是引入自定义UI小部件的完美方式。

在分析本系列第一部分中的线框图时，我们注意到帖子列表功能在三个视图中使用，即：

1. 发布列表
2. 作者简介
3. 类别帖子列表

因此，我们可以创建一个自定义AngularJS指令，其中包含使用我们在本系列前面部分创建的服务来检索帖子的业务逻辑，而不是编写单独的功能来列出这三个页面上的帖子。除了业务逻辑之外，该指令还将包含在某些视图上列出帖子的渲染逻辑。也在该指令中定义了帖子分页和根据某些条件检索帖子的功能。

因此，为帖子列表功能创建自定义AngularJS指令允许我们仅在一个位置定义该功能，这将使我们将来更容易扩展或修改此功能，而无需更改其中的代码使用它的所有三个实例。

话虽如此，让我们开始为帖子列表功能编写自定义指令。

规划帖子列表的自定义AngularJS指令

在我们开始编写用于构建帖子列表功能指令的任何代码之前，让我们分析一下指令中所需的功能。

在最基本的层面上，我们需要一个可以在帖子列表、作者个人资料和类别页面的视图上使用的指令。这意味着我们将创建一个放置在HTML中的自定义UI小部件（或DOM标记），AngularJS将根据我们为指令的特定实例提供的选项来处理其余的事情。

因此，我们将创建一个由以下标记标识的自定义UI小部件：