深入讲解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 相关文章推荐
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
Nov 01 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
jQuery ajax动态生成table功能示例
Jun 14 jQuery
微信小程序实现无限滚动列表
May 29 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 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打造属于自己的MVC框架
2012/03/07 PHP
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
JavaScript toFixed() 方法
2010/04/15 Javascript
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
JS留言功能的简单实现案例(推荐)
2016/06/23 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
Python爬虫工程师面试问题总结
2018/03/22 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
Python中Qslider控件实操详解
2021/02/20 Python
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
《槐乡五月》教学反思
2014/04/25 职场文书
见习报告格式要求
2014/11/04 职场文书
大学生创业事迹材料
2014/12/30 职场文书
大学生求职自荐信
2015/03/24 职场文书
前台岗位职责范本
2015/04/16 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
辩论赛新闻稿
2015/07/17 职场文书
html+css实现文字折叠特效实例
2021/06/02 HTML / CSS