Directive可能是AngularJS中比较复杂的一个东西了。一般我们将其理解成指令。AngularJS自带了不少预设的指令,比如ng-app,ng-controller这些。可以发现个特点,AngularJS自带的指令都是由ng-打头的。
那么,Directive究竟是个怎么样的一个东西呢?我个人的理解是这样的:将一段html、js封装在一起,形成一个可复用的独立个体,具体特定的功能。下面我们来详细解读一下Directive的一般性用法。
var myDirective = angular.module('directives', []); myDirective.directive('directiveName', function($inject) { return { template: '', replace: false, transclude: true, restrict: 'E', scope: {}, controller: function($scope, $element) { }, complie: function(tElement, tAttrs, transclude) { return { pre: function preLink(scope, iElement, iAttrs, controller) { }, post: function postLink(scope, iElement, iAttrs, controller) { } }; }, link: function(scope, iElement, iAttrs) { } }; });
return { name: '', priority: 0, terminal: true, scope: {}, controller: fn, require: fn, restrict: '', template: '', templateUrl: '', replace: '', transclude: true, compile: fn, link: fn }
相关教程推荐:《angular教程》
如上所示,return的对象中会有很多的属性,这行属性都是用来定义directive的。
name
priority
teminal
scope
true
{}
controller
require
restrict
template
templateUrl
replace
transclude
true/false
转换这个directive的内容。(这个感觉上,是直接将内容编译后搬入指定地方)‘element’
转换整个元素,包括其他优先级较低的directive。(像将整体内容编译后,当作一个整体(外面再包裹p),插入到指定地方)compile
link
这里关于directive的scope为一个object时,有更多的内容非常有必要说明一下。看下面的代码:
scope: { name: '=', age: '=', sex: '@', say: '&' }
这个scope中关于各种属性的配置出现了一些奇怪的前缀符号,有=,@,&,那么这些符号具体的含义是什么呢?再看下面的代码:
function Controller($scope) { $scope.name = 'Pajjket'; $scope.age = 99; $scope.sex = '我是男的'; $scope.say = function() { alert('Hello,我是弹出消息'); }; }
=
: 指令中的属性取值为Controller中对应$scope上属性的取值@
: 指令中的取值为html中的字面量/直接量&
: 指令中的取值为Controller中对应$scope上的属性,但是这个属性必须为一个函数回调
下面是更加官方的解释:=
或者=expression/attr
例如: 中,widget定义的scope为:{localModel: '=myAttr'},那么widget scope property中的localName将会映射父scope的parentModel。如果parentModel发生任何改变,localModel也会发生改变,反之亦然。即双向绑定。
@或者@attr 建立一个local scope property到DOM属性的绑定。因为属性值总是String类型,所以这个值总返回一个字符串。如果没有通过@attr指定属性名称,那么本地名称将与DOM属性的名称一致。 例如: ,widget的scope定义为:{localName: '@myAttr'}。那么,widget scope property的localName会映射出"hello "转换后的真实值。当name属性值发生改变后,widget scope的localName属性也会相应的改变(仅仅是单向,与上面的=不同)。那么属性是在父scope读取的(不是从组件的scope读取的)
&或者&attr 提供一个在父scope上下文中执行一个表达式的途径。如果没有指定attr的名称,那么local name将与属性名一致。
,widget的scope定义为:{localFn:’increment()’},那么isolate scope property localFn会指向一个包裹着increment()表达式的function。
一般来说,我们希望通过一个表达式,将数据从isolate scope传到parent scope中。这可以通过传送一个本地变量键值的映射到表达式的wrapper函数中来完成。例如,如果表达式是increment(amount),那么我们可以通过localFn({amount:22})的方式调用localFn以指定amount的值。
下面的示例都围绕着上面所作的参数说明而展开的。
// 自定义directive var myDirective = angular.modeule('directives', []); myDirective.directive('myTest', function() { return { restrict: 'EMAC', require: '^ngModel', scope: { ngModel: '=' }, template: 'Weather for {{ngModel}}
' }; }); // 定义controller var myCOntrollers= angular.module('controllers', []); myControllers.controller('testController', [ '$scope', function($scope) { $scope.name = 'this is directive1'; } ]); var app = angular.module('testApp', [ 'directives', 'controllers' ]);template与templateUrl的区别和联系
templateUrl其实根template功能是一样的,只不过templateUrl加载一个html文件,上例中,我们也能发现问题,template后面根的是html的标签,如果标签很多呢,那就比较不爽了。可以将上例中的,template改一下。
myDirective.directive('myTest', function() { return { restrict: 'EMAC', require: '^ngModel', scope: { ngModel: '=' }, templateUrl:'../partials/tem1.html' //tem1.html中的内容就是上例中template的内容。 } });scope重定义
//directives.js中定义myAttr myDirectives.directive('myAttr', function() { return { restrict: 'E', scope: { customerInfo: '=info' }, template: 'Name: {{customerInfo.name}} Address: {{customerInfo.address}}
' + 'Name: {{vojta.name}} Address: {{vojta.address}}' }; }); //controller.js中定义attrtest myControllers.controller('attrtest',['$scope', function($scope) { $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' }; $scope.vojta = { name: 'Vojta', address: '3456 Somewhere Else' }; } ]); // html中其运行结果如下:
Name: Naomi Address: 1600 Amphitheatre //有值,因为customerInfo定义过的 Name: Address: //没值 ,因为scope重定义后,vojta是没有定义的我们将上面的directive简单的改一下,
myDirectives.directive('myAttr', function() { return { restrict: 'E', template: 'Name: {{customerInfo.name}} Address: {{customerInfo.address}}
' + 'Name: {{vojta.name}} Address: {{vojta.address}}' }; });
- 运行结果如下:
Name: Address: Name: Vojta Address: 3456 Somewhere Else因为此时的directive没有定义独立的scope,customerInfo是undefined,所以结果正好与上面相反。
transclude的使用
- transclude的用法,有点像jquery里面的$().html()功能
myDirective.directive('myEvent', function() { return { restrict: 'E', transclude: true, scope: { 'close': '$onClick' //根html中的on-click="hideDialog()"有关联关系 }, templateUrl: '../partials/event_part.html' }; }); myController.controller('eventTest', [ '$scope', '$timeout', function($scope, $timeout) { $scope.name = 'Tobias'; $scope.hideDialog = function() { $scope.dialogIsHidden = true; $timeout(function() { $scope.dialogIsHidden = false; }, 2000); }; } ]);Check out the contents, {{name}}!
- 说明:这段html最终的结构应该如下所示:
Check out the contents, {{name}}!
- 将原来的html元素中的元素Check out the contents, !插入到模版的中,还会另外附加一个标签。
controller
,link
,compile
之间的关系myDirective.directive('exampleDirective', function() { return { restrict: 'E', template: 'Hello {{number}}!
', controller: function($scope, $element){ $scope.number = $scope.number + "22222 "; }, link: function(scope, el, attr) { scope.number = scope.number + "33333 "; }, compile: function(element, attributes) { return { pre: function preLink(scope, element, attributes) { scope.number = scope.number + "44444 "; }, post: function postLink(scope, element, attributes) { scope.number = scope.number + "55555 "; } }; } } }); //controller.js添加 myController.controller('directive2',[ '$scope', function($scope) { $scope.number = '1111 '; } ]); //html
- 上面小例子的运行结果如下:
Hello 1111 22222 44444 5555 !由结果可以看出来,controller先运行,compile后运行,link不运行。 我们现在将compile属性注释掉后,得到的运行结果如下:
Hello 1111 22222 33333
!由结果可以看出来,controller先运行,link后运行,link和compile不兼容。一般地,compile比link的优先级要高。
更多编程相关知识,请访问:编程入门!!
以上就是深入浅析Angular中Directive的用法的详细内容,更多请关注其它相关文章!
写下你的评论吧 !推荐阅读
本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时,使用50作为默认值;当输入字段填充有-20或更多(负数)时,使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码,用于动态地根据条件使用默认值。 ... [详细]蜡笔小新 2023-12-10 12:35:46 Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]蜡笔小新 2023-12-12 15:59:36 Iwouldliketobeabletohaveasidebarthatcanbetoggledinandoutonabuttonpress.However ... [详细]蜡笔小新 2023-10-13 12:28:22 本文介绍了解决IE678伪类不兼容问题的方法,包括少用CSS3和HTML5独有的属性,使用CSS hacker,使用last-child清除浮动、批量添加标签、去掉list item最后一个的border-right等技巧。同时还介绍了使用after清除浮动时加上IE独有属性zoom:1的处理方法。另外,本文还提到可以使用jQuery代替批量添加标签的功能,以及使用负边距和CSS2选择器element+element去掉list item最后一个的border-right的方法。 ... [详细]蜡笔小新 2023-12-13 10:50:43 本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]蜡笔小新 2023-12-13 06:02:20 IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ... [详细]蜡笔小新 2023-12-12 13:43:58 本文介绍了一个延迟注入工具(python)的SQL脚本,包括使用urllib2、time、socket、threading、requests等模块实现延迟注入的方法。该工具可以通过构造特定的URL来进行注入测试,并通过延迟时间来判断注入是否成功。 ... [详细]蜡笔小新 2023-12-12 10:36:42 本文介绍了绕过WAF的XSS检测机制的方法,包括确定payload结构、测试和混淆。同时提出了一种构建XSS payload的方法,该payload与安全机制使用的正则表达式不匹配。通过清理用户输入、转义输出、使用文档对象模型(DOM)接收器和源、实施适当的跨域资源共享(CORS)策略和其他安全策略,可以有效阻止XSS漏洞。但是,WAF或自定义过滤器仍然被广泛使用来增加安全性。本文的方法可以绕过这种安全机制,构建与正则表达式不匹配的XSS payload。 ... [详细]蜡笔小新 2023-12-11 19:42:30 本文介绍了一个免费的asp.net控件,该控件具备数据显示、录入、更新、删除等功能。它比datagrid更易用、更实用,同时具备多种功能,例如属性设置、数据排序、字段类型格式化显示、密码字段支持、图像字段上传和生成缩略图等。此外,它还提供了数据验证、日期选择器、数字选择器等功能,以及防止注入攻击、非本页提交和自动分页技术等安全性和性能优化功能。最后,该控件还支持字段值合计和数据导出功能。总之,该控件功能强大且免费,适用于asp.net开发。 ... [详细]蜡笔小新 2023-12-11 09:41:26 本文介绍了互联网思维中的三个段子,涵盖了餐饮行业、淘品牌和创业企业的案例。通过这些案例,探讨了互联网思维的九大分类和十九条法则。其中包括雕爷牛腩餐厅的成功经验,三只松鼠淘品牌的包装策略以及一家创业企业的销售额增长情况。这些案例展示了互联网思维在不同领域的应用和成功之道。 ... [详细]蜡笔小新 2023-12-10 14:58:10 web前端|js教程off-canvas,部分,超出web前端-js教程mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条,因为它主要用途是设置类似于qq界面的那种格 ... [详细]蜡笔小新 2023-10-17 20:40:03 弹性云服务器ECS弹性云服务器(ElasticCloudServer)是一种可随时自助获取、可弹性伸缩的云服务器,帮助用户打造可靠、安全、灵活、高效的应用环境 ... [详细]蜡笔小新 2023-10-17 15:48:57 作者:kosamino来源:cnblogs.comjing99p11696192.html哈喽,各位新来的小伙伴们,大家好& ... [详细]蜡笔小新 2023-10-17 14:51:06 厦禾Tony_303这个家伙很懒,什么也没留下!Tags | 热门标签RankList | 热门文章
- 1BOM、location对象、history历史记录、scroll 浏览器滚动
- 2《王巩清虚堂》翻译 原文赏析诗人宋苏轼
- 3关于微信小程序:有没有真正免费的小程序
- 4常用JS效果 不断进步贴 不停更新~ 纪念用~
- 5在Rails灯具中,Quentin是谁? - In Rails fixtures, who is Quentin?
- 6java 作用域_(转载)Java变量作用域详解
- 7转载 二进制,八进制,十进制,十六进制转换算法
- 8Go语言基础单元测试与性能测试示例详解
- 9win10 nuget 无法下载_随笔博图V14仿真软件在1200项目中不能下载?
- 10c线程池有完整测试案例二
- 11Python 获得摄像头捕捉的图像
- 12office转换为PDF 轻松一按,自动转换
- 13我用 OpenGL 实现了那些年流行的相机滤镜
- 14值得关注的十个优秀的CSS框架
- 15老电脑如何设置U盘启动?
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有