深入讲解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 相关文章推荐
JS宝典学习笔记(下)
Jan 10 Javascript
循环 vs 递归浅谈
Feb 28 Javascript
js动画效果制件让图片组成动画代码分享
Jan 14 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 Javascript
javaScript中indexOf用法技巧
Nov 26 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
Dec 29 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
如何开发一个渐进式Web应用程序PWA
May 10 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获取mysql版本的几种方法小结
2008/03/25 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
2016/02/16 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
用Eclipse写python程序
2018/02/10 Python
解决python升级引起的pip执行错误的问题
2018/06/12 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
Python实现括号匹配方法详解
2020/02/10 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
安全生产责任书
2014/03/12 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
市场推广策划方案
2014/06/02 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
教师培训学习心得体会
2016/01/21 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技