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


Posted in Javascript onJune 18, 2015

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

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

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

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

<guitar-reviews> ... </guitar-reviews>

在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标签中敲入如下属性,这个标签用来盛放代码片段。当我们想使用特定代码片段,我们只要敲下这样的标签来包含该代码。
 

<div guitar-reviews> ... </div>

在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。此时,你的文件夹层次结构如下:

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

 第二步

在details.html中剪切review部分,并添加<user-reviews></user-reviews>标签如下所示:

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

 第三步

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

<!-- Review Tab START, it has a new controller -->
<div ng-show="panel.isSelected(3)" class="reviewContainer" ng-controller="ReviewController as reviewCtrl" >
 
<!-- User Reviews on each guitar from data.json - simple iterating through guitars list -->
<div class="longDescription uReview" ng-repeat="review in guitarVariable[whichGuitar].reviews"> 
  <h3>Review Points: {{review.star}} </h3>
  <p> {{review.body}} ~{{review.name}} on <date>{{review.createdOn | date:'MM/yy'}} </p>
</div><!-- End User Reviews -->
 
<!-- This is showing new review preview-->
<div ng-show="add === 1" class="longDescription uReview" > 
  <h3>Review Points: {{reviewCtrl.review.star}} <span ng-click="add=0">X</span></h3>
  <p> {{reviewCtrl.review.body}} ~ {{reviewCtrl.review.name}} </p>
</div>
 
<!-- Add new Review to specific guitar - click this link to show review adding pannel -->
<a href ng-click="add=1" class="addReviewLink">Add review</a>  
 
<!-- form validates here using form name and .$valid and on submission we are going to addReview function with guitarID -->
<form class="reviewForm" name="reviewForm" ng-submit="reviewForm.$valid && reviewCtrl.addReview(guitarVariable.indexOf(guitarVariable[whichGuitar]))" novalidate ng-show="add===1" >
  <div>
    Review Points: 
    <!-- ng-option here is setting options, cool? -->
    <select ng-model="reviewCtrl.review.star" ng-options="point for point in [5,4,3,2,1]" required >    
    </select>
    Email: 
    <input type="email" ng-model="reviewCtrl.review.name" required>
    <button type="submit">Submit</button>
    </div>
    <textarea placeholder="Enter your experience with this guitar..." ng-model="reviewCtrl.review.body"></textarea>
</form><!-- END add new review -->
</div><br /><!-- END Review Tab -->

 
第四步

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

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

 

代码解释:

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

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

Javascript 相关文章推荐
用roll.js实现的图片自动滚动+鼠标触动的特效
Mar 18 Javascript
jquery选择器使用详解
Apr 08 Javascript
基于Vuejs实现购物车功能
Aug 02 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
Vue 使用中的小技巧
Apr 26 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
微信小程序框架的页面布局代码
Aug 17 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
关于JSON解析的实现过程解析
Oct 08 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 Javascript
Json实现传值到后台代码实例
Jun 30 Javascript
JS实现放大镜效果
Sep 21 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 #Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 #Javascript
使用AngularJS对路由进行安全性处理的方法
Jun 18 #Javascript
浅谈Node.js中的定时器
Jun 18 #Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 #Javascript
Node.js事件驱动
Jun 18 #Javascript
详解AngularJS的通信机制
Jun 18 #Javascript
You might like
文件系统基本操作类
2006/11/23 PHP
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
详解python:time模块用法
2019/03/25 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
美容院营销方案
2014/03/05 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL