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

这篇文章主要介绍了深入讲解AngularJS中的自定义指令的使用,AngularJS是一款热门的JavaScript开发库,需要的朋友可以参考下

AngularJS的自定义指令,就是你自己的指令,加上编译器编译DOM时运行的原生核心函数。这可能很难理解。现在,假设我们想在应用中不同页面复用一些特定的代码,而又不复制代码。那么,我们就可以简单地把这段代码放到单独的文件,并调用使用自定义指令的代码,而不是一遍又一遍地敲下来。这样的代码更容易理解。AngularJS中有四种类型的自定义指令:

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

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

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

  ... 

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

 app.directive('guitarReviews', function() { return { restrict  : 'E', // used E because of element templateUrl : 'custom-directives/reviews.html' }; }); 

代码解释:

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

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

 
...

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

 app.directive('guitarReviews', function() { return { restrict  : 'A', // used A because of attribute templateUrl : 'custom-directives/reviews.html' }; }); 

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

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

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

 第二步

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

 第三步

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

 

Review Points: {{review.star}}

{{review.body}} ~{{review.name}} on {{review.createdOn | date:'MM/yy'}}

Review Points: {{reviewCtrl.review.star}} X

{{reviewCtrl.review.body}} ~ {{reviewCtrl.review.name}}

Add review
Review Points: Email:

 
第四步

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

 GuitarControllers.directive('userReviews', function() { return { restrict  : 'E', // used E because of element templateUrl : 'partials/cDirectives/reviews.html' }; }); 

 

代码解释:

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

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

以上就是深入讲解AngularJS中的自定义指令的使用的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读

    excel怎么用乘法函数

    excel怎么用乘法函数,乘法,函数,哪个,excel乘法函数怎么用?1、首先用鼠标选中要计算的单元格。2、然后选中单元格后点击左上方工具栏的fx公

    不要混淆核心i7/i5/i3的名字细节

    不要混淆核心i7/i5/i3的名字细节,,Core i7 / i5 / i3处理器lga1156接口英特尔新的命名混乱,很多读者会感到困惑。甚至很多高级硬件玩家无法

    excel中乘法函数是什么?

    excel中乘法函数是什么?,乘法,函数,什么,打开表格,在C1单元格中输入“=A1*B1”乘法公式。以此类推到多个单元。1、A1*B1=C1的Excel乘法公式

    标准差excel用什么函数?

    标准差excel用什么函数?,函数,标准,什么,在数据单元格的下方输入l标准差公式函数公式“=STDEVPA(C2:C6)”。按下回车,求出标准公差值。详细

    PC计算机:AMDCPU核心细节

    PC计算机:AMDCPU核心细节,,核心提示:AthlonXP的核心型athlonxp有4种不同的核心类型,但都有个共同点:他们都使用socketa接口,他们都使用PR标称值

    128mb集双核心3000元办公配置

    128mb集双核心3000元办公配置,,支持双内存规格,集成的Radeon hd4200核心七c.a785g双显示彩虹V14主板现在的价格仅为499元,是办公用户攒机的

    5717元高端核心i54570全能电脑配置

    5717元高端核心i54570全能电脑配置,, 现在已经有haswell架构处理器,第一批haswell处理器都是中高端配置,适合一些高端电脑用户选择。市场