AngularJS1.X学习笔记9-自定义指令（中）
今天好大的雨啊！上一节中，我们的指令中的工厂函数中都是返回了一个叫做链接函数的工人函数，事实上我们的工厂函数也是可以返回一个对象，这个对象里面可以包含很多的属性，这使得我们可以创建更加强大的指令。
一、link属性
这个属性的值是一个函数，叫做链接函数。
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>link</title>
</head>
<body ng-controller="directiveCtrul">
<h1 get-data id="dff" class="haha"></h1> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript">
angular.module('myApp',[])
.controller('directiveCtrul',function($scope){
$scope.data = "你好啊！";
})
.directive("getData",function(){
return {
link:function(scope,element,attrs){
console.log(scope['data']);
}
}
})
</script>
</body>
</html>
有木有发现这跟上文中的第一个例子几乎完全相同，只是将那个返回的函数放到了一个对象的link属性中。
二、restrict
restrict属性定义了我们的指令应该被怎样使用。E表示作为一个元素，A表示用作一个属性，C表示用作一个类，M表示用作一个注释 。
directive("getData",function(){
return {
link:function(scope,element,attrs){
console.log(scope['data']);
},
restrict:"ECA"
}
})
<h1 get-data id="dff" class="haha"></h1><!-- 用作属性A -->
<get-data></get-data> <!-- 用作元素E -->
<h1 class="get-data"></h1> <!-- 用作类C -->
假如用错了会怎样？如果你不是通过指令获取数据的，那么只是不工作而已;另外，如果你依赖了指令，那么可能会引用错误。
三、 template，templateUrl
都是用来指定一个模板的。
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>link</title>
</head>
<body ng-controller="directiveCtrul">
<div get-data="data" id="dff" class="haha"></div><!-- 用作属性A -->
<script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript">
angular.module('myApp',[])
.controller('directiveCtrul',function($scope){
$scope.data = "你好啊！";
})
.directive("getData",function(){
return {
link:function(scope,element,attrs){
scope.data = scope[attrs['getData']];
},
restrict:"A",
template:"<h1>{{data}}</h1>"
}
})
</script>
</body>
</html>
还阔以用函数指定模板
directive("getData",function(){
return {
link:function(scope,element,attrs){
scope.data = scope[attrs['getData']];
},
restrict:"A",
template:function(){return "<h1>{{data}}</h1>"}
}
})
看看指定一个外部模板
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>link</title>
</head>
<body ng-controller="directiveCtrul">
<div get-data="data" id="dff" class="haha"></div><!-- 用作属性A -->
<script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript">
angular.module('myApp',[])
.controller('directiveCtrul',function($scope){
$scope.data = "你好啊！";
})
.directive("getData",function(){
return {
link:function(scope,element,attrs){
scope.data = scope[attrs['getData']];
},
restrict:"A",
templateUrl:'h.html'
}
})
</script>
</body>
</html>
在我们的同级目录中有个叫做h.html的文件，里面定义了我们的模板。这个外部模板实际上是发起了一次ajax请求，将请求的文件添加到了指定位置。
四、replace
这个属性决定了我们的运用指令的那个元素是否应该被替换掉。
举个例子，上面的那个测试生成的和结构是这样的
但我们将replace属性置为true时，结构就是这样的了
看到没，那个div没了。
本文到此结束，我决定将作用域的管理放到下一篇文章，因为我决定先休息一下。
AngularJS1.X学习笔记9-自定义指令（中）的更多相关文章
- AngularJS1.X学习笔记8-自定义指令（上）
AngulaJS的指令是一种非常强大的特性,一个ng-repeat就能让我们非常方便的展示一个数据列表,指令相当于是一个组件,为我们将一些东西封装起来了,提供了复用的可能性.个人认为自定义指令还是比较 ...
- AngularJs学习笔记3——自定义指令
指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...
- AngularJS学习笔记(四) 自定义指令
指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...
- AngularJS1.X学习笔记10-自定义指令（下）
继续继续,学完这个部分就去吃饭.引用自由男人的话作为本文的开始:“默认情况下,链接函数被传入了控制器的作用域,而该控制器管理着的视图包含了指令所应用到的元素”.果然像是绕口令,还是看看你的例子比较好. ...
- Angularjs进阶笔记（2）-自定义指令中的数据绑定
有关自定义指令的scope参数,网上很多文章都在讲这3种绑定方式实现的效果是什么,但几乎没有人讲到底怎么使用,本篇希望聊聊到底怎么用这个话题. 一. 自定义指令 自定义指令,是Angularjs用来实 ...
- ASP.NET MVC 学习笔记-7.自定义配置信息 ASP.NET MVC 学习笔记-6.异步控制器 ASP.NET MVC 学习笔记-5.Controller与View的数据传递 ASP.NET MVC 学习笔记-4.ASP.NET MVC中Ajax的应用 ASP.NET MVC 学习笔记-3.面向对象设计原则
ASP.NET MVC 学习笔记-7.自定义配置信息 ASP.NET程序中的web.config文件中,在appSettings这个配置节中能够保存一些配置,比如, 1 <appSettin ...
- angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...
- Hadoop学习笔记—5.自定义类型处理手机上网日志
转载自http://www.cnblogs.com/edisonchou/p/4288737.html Hadoop学习笔记—5.自定义类型处理手机上网日志 一.测试数据:手机上网日志 1.1 关于这 ...
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
随机推荐
- redis3.0.7集群部署手册
1.用root登录主机2.将redis-3.0.7.tar.gz传送到主机3.将rubygems-update-2.5.2.gem,redis-3.0.0.gem传送到主机4.解压redis-3.0. ...
- sharepoint 2013实践
之前在一篇文章中说过了SharePoint环境的安装.那么如何使用SharePoint开发一个站点呢?这就是本篇所要阐述的问题. 在如何具体操作之前,我们先来普及下SharePoint基础知识.Far ...
- C++ RCSP智能指针简单实现与应用
智能指针的实现代码来源博客:<http://blog.csdn.net/to_be_better/article/details/53570910> 修改:添加 get()函数,用以获得原 ...
- ASP.NET Core Web API下事件驱动型架构的实现（四）：CQRS架构中聚合与聚合根的实现
在前面两篇文章中,我详细介绍了基本事件系统的实现,包括事件派发和订阅.通过事件处理器执行上下文来解决对象生命周期问题,以及一个基于RabbitMQ的事件总线的实现.接下来对于事件驱动型架构的讨论,就需 ...
- assert断言检测
assert 是宏,非函数,包含在assert.h 头文件中. 如果其后面括号里的值为假,则程序终止运行,并提示出错.这个 宏只在 Debug 版本上起作用,而在 Release 版本被编译器完全优化 ...
- POI读写Excel-操作包含合并单元格操作
在上篇博客中写到关于Excel操作解析成相关的类,下面将写入一种Excel对Excel表格读取和写入. 对于Excel表格操作,最重要的是创建workBook.其操作顺序是: 1.获得WorkBook ...
- Unity3D 打包Standalone(exe文件) Shader丢失
Shader丢失算是老生常谈了 从刚开始接触Unity时,从别的地方拿过来模型导入 就认识了一个标志性的颜色 就是粉色,或者是紫色 当在Unity中遇到这种颜色 不用怀疑 绝对是Shader或者材质丢 ...
- 使用python+Selenium对空调控制器进行循环发送控制命令
今天一同事说想对空调控制器进行循环发送命令操作.经过了对控制流程的梳理,发现每次选择内机后进入控制页面设定温度都是在26度,想了想,如果要进行循环就得将设定温度重置为17度,然后每循环一次温度增加1度 ...
- CI框架传递数组到view层问题记录
给大家分享一下在做页面显示天气预报功能中遇到的问题和解决方法!! 项目开发中,我用的天气预报API是心知天气的免费接口.关于天气预报接口,可用的有很多,看需求怎么要求了!有兴趣的小伙伴可以链接到这个地 ...
- Mycat 分片规则详解--范围取模分片
实现方式:该算法先进行范围分片,计算出分片组,组内在取模 优点:综合了范围分片和取模分片的优点,分片组内使用取模可以保证组内的数据分布比较均匀,分片组之间采用范围分片可以兼顾范围分片的特点,事先规划好 ...