深入讲解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 相关文章推荐
WEB高性能开发之疯狂的HTML压缩
Jun 19 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
简单的Jquery遮罩层代码实例
Nov 14 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 Javascript
详谈Node.js之操作文件系统
Aug 29 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
vue中v-model动态生成的实例详解
Oct 27 Javascript
浅谈微信小程序flex布局基础
Sep 10 Javascript
JS代码优化的8点建议
Feb 04 Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 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
PHP两种实现无级递归分类的方法
2017/03/02 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
python解析xml文件实例分析
2015/05/27 Python
Python自定义简单图轴简单实例
2018/01/08 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
python判断自身是否正在运行的方法
2019/08/08 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
优秀研究生自我鉴定
2013/12/04 职场文书
试用期员工考核制度
2014/01/22 职场文书
产品售后服务承诺书
2014/05/21 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
教师节班会主持词
2015/07/06 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技