深入解释在AngularJS中自定义命令的使用

AngularJS的自定义指令是您自己的指令，加上编译器在编译DOM时运行的本机核心函数。这可能很难理解。现在，假设我们想在应用程序的不同页面上重用一些特定的代码，而不复制代码。然后，我们可以简单地将这段代码放在一个单独的文件中，并使用自定义指令调用代码，而不是一遍又一遍地输入。这段代码更容易理解。AngularJS中有四种类型的自定义命令：

在我们现有的app中实现元素指令属性指令CSS类指令注释指令之前，我们先来看看自定义指令是什么样子的：元素指令

用html编写以下标签，用于放置代码片段。当我们想要使用特定的代码时，我们使用上面的标签来包含代码。

指南评论./guide-reviews在JS文件中，使用下面几行代码使上面提到的angularJS自定义指令生效。

app . directive(' Gittareviews '，function(){ return { restrict : ' E '，//由于元素TemplateURl : ' custom-directions/reviews . html '而使用了E }；});代码解释：

像app.controller一样，我们首先定义app.directive，然后定义guitarReview，这是html中使用的元素标签名。但是你注意到吉他评论和吉他评论是不同的吗？这是因为指南评论的连字符被转换成驼峰大小写，所以在JS文件中变成了guitarReviews。下一步是返回参数的匿名函数。Restrict:' e '意味着我们正在定义一个自定义元素指令，templateUrl指向要包含的代码片段文件。属性指令

在html文件的html标记中键入以下属性，该标记用于保存代码片段。当我们想要使用一个特定的代码片段时，我们只需要敲下标签来包含代码。

Div吉他评论./div在JS文件中，使用以下代码使上面的angularJS自定义指令生效。

app . directive(' Gittareviews '，function(){ return { restrict : ' A '，//A由于属性TemplateURl : ' custom-directions/reviews . html '而被使用}；});请注意， AngularJS建议您将自定义指令中的css和注释替换为简单的CSS和普通注释。

现在让我们在应用程序中实现自定义指令。你可以在这里下载项目文件。我将reviews部分的代码放在一个单独的文件中，然后将代码片段分配给一个元素，最后在details.html页面中使用它。第一步

在指定文件夹下创建一个名为cDirectives的新文件夹，用于存储自定义指令。然后，在这个文件夹下创建一个reviews.html文件来保存用户的评论。此时，您的文件夹层次结构如下：

第二步

在details.html中剪切评论部分，并添加用户评论/用户评论选项卡，如下所示：

第三步

将您在details.html页面中剪切的代码复制到reviews.html，如下所示：

！-回顾选项卡开始，它有一个新的控制器-div-ng-show=面板。被选中(3)' class=' Review container ' ng-controller=' Review controller as Review ctrl '！-来自data.json的每把吉他的用户评论-简单地遍历吉他列表-div class=' longDescription uReview ' ng-repeat='在吉他变量[哪个吉他]中进行评论评论的H3评论点： { {评论。星} }/H3 p { {评论。正文} } ~ { {评论。姓名} }日期{ {审阅。create don | date : ' MM/YY ' } }/p/div！-最终用户评论-!-这是显示新的审阅预览-div ng-show=' add===1 ' class=' longDescription uReview ' H3点评积分3360 { {点评ctrl。复习。star } } span ng-click=' add=0 ' X/span/H3 p { { review ctrl。复习。正文} } ~ { {审阅ctrl。复习。name } }/p/div！-向特定吉他添加新评论-单击此链接可显示添加评论-a href ng-click=' Add=1 ' class=' addReviewLink '添加评论/a！-表单在此使用表单名称和进行验证。$有效，在提交时，我们将添加一个带有git taid-form class=' Review form ' name=' Review form ' ng-submit=' Review form '的回顾函数$有效的审阅ctrl。addreview(Gitavariable。indexof(Gitavariable[what Githat])“novalidate ng-show=" add===1 " div Review points 3360！-ng-选项这里是设置选项，酷吗？-选择ng-model='审阅ctrl。复习。星号“ng-options=”逐点输入[5,4,3,2,1]'必填/选择电子邮件：输入类型=' email ' ng-model=' review ctrl。复习。'姓名'必填按钮类型=“提交”提交/按钮/div文本区域占位符='输入您使用这把吉他的体验.'ng-model=' reviewctrl。复习。正文/文本区域/表单！表示“受到某种对待的人”:dividend | reverend添加新评论- /divbr /！-结束审查选项卡-第四步

现在可以在用户评论标签中添加行为了。让我们打开controller.js，添加如下代码：

吉他控制器。指令(' userReviews '，function(){ return { restrict : ' E '，//由于元素template URl : ' partials/cdireactives/reviews。' html '而使用了e }；});

代码解释：

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

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