深入讲解AngularJS中的自定义指令的使用_AngularJS

1. 元素指令
2. 属性指令
3. CSS class 指令
4. 注释指令

在我们现有的app中实现他们之前，我们来看看自定义指令是个什么样子:

元素指令

在html中写下如下的标签,它用来放置代码片段。当我们想使用特定的代码，我们就用上述标签来包含该代码。

在JS文件中，用以下几行代码来使上述angularJS自定义指令生效。

代码解释:

如同app.controller，我们先定义app.directive，然后定义guitarReview,后者是html中用到的元素标签名。但是你注意到没有，guitar-review 和guitarReviews是不同的?这是因为 guitar-reviews的连字符转换到驼峰式大小写，因而在JS文件中就变成了guitarReviews。下一步是正在返回参数的匿名函数。 restrict: ‘E' 是指我们在定义一个自定义元素指令，而 templateUrl则指向要包含的代码片段文件。

属性指令

在html文件的html标签中敲入如下属性，这个标签用来盛放代码片段。当我们想使用特定代码片段，我们只要敲下这样的标签来包含该代码。

在JS文件中，用以下代码来使上述angularJS自定义指令生效。

注意: AngularJS 推荐你用简单的 css 和普通的注释代替自定义指令中的CSS和注释.

现在让我们在app中实现自定义指令吧。你可以在这里下载项目文件。我把reviews部分的代码放到单独的文件，再把该代码片段赋给一个元素，最后在details.html页面中使用.

第一步

在指定的文件夹下新建一个文件夹命名为cDirectives，用来存放自定义的指令。然后，在该文件夹下创建一个reviews.html文件，用于持有用户的reviews。此时，你的文件夹层次结构如下：

第二步

在details.html中剪切review部分，并添加标签如下所示：

第三步

将你在details.html页面中剪切的代码拷贝至reviews.html如下所示：

第四步

现在可以在user-reviews标签中添加行为了。让我们打开controller.js，添加如下代码：

代码解释：

我们的指令在这里变成了userReviews(以camel形式表示)并且连字符不见了。下面我们可以说，当它被调用时加载templateURL中的文件并且对元素E限制该指令。

我们刚刚自定义了一个指令。尽管看起来我们的应用中没有变化，但是现在我们的代码较之前已经进行了很好的规划。你能为描述和规格自定义指令吗？自己尝试一下吧。