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 ...
随机推荐
- c# List实现原理
在研究前辈们写的代码,总是搞不明白.word文中引文的索引和引文列表中的索引对应关系是什么呢?是如何对应上的?我冥思苦想,昨天又系统地看了下代码,才所有悟,所以记录下我的探索过程. 如下图所示: 图1 ...
- Django用户登录与注册系统
一.创建项目 1.1.创建项目和app python manage.py startproject mysite_login python manage.py startapp login 1.2.设 ...
- 洛谷 P1025 数的划分
题目描述 将整数n分成k份,且每份不能为空,任意两个方案不相同(不考虑顺序). 例如:n=7,k=3,下面三种分法被认为是相同的. 1,1,5; 1,5,1; 5,1,1; 问有多少种不同的分法. 输 ...
- js备战春招の四のjs函数
1.普通函数声明: 2.函数表达式:函数表达式可以存储在变量中,在函数表达式存储在变量后,变量也可作为一个函数使用: 以上函数实际上是一个 匿名函数 (函数没有名称).函数存储在变量中,不需要函数名称 ...
- windows7+python2.7+setuptools 、pip+Django+PIL 网页制作环境配置
1.安装Python2.7 官网下载安装包python-2.7.amd64,对应64位.安装时没什么特别操作,安装后将python的安装路径添加到系统变量path中,步骤为程序->计算机-> ...
- 题目1023：EXCEL排序
//都是泪啊,搞了半天,竟然是成绩的数据类型搞成了string,输出测试用例的次数竟然搞成了排序的类别...细节决定成败!!! 题目描述: Excel可以对一组纪录按任意指定列排序.现请你编写程序实现 ...
- vc的环境变量配置和缺少mspdb60.dll的解决方法
vc的编译器是cl.exe,我们如果在vc中编译就不用配置环境,但是如果要在任何位置用命令提示符打开编译器cl.exe来编译程序,那么就要配置环境了. 下面我就讲讲vc的环境变量配置和缺少mspdb6 ...
- Asp.Net Core 2.0 项目实战（10） 基于cookie登录授权认证并实现前台会员、后台管理员同时登录
1．登录的实现 登录功能实现起来有哪些常用的方式,大家首先想到的肯定是cookie或session或cookie+session,当然还有其他模式,今天主要探讨一下在Asp.net core 2.0下 ...
- 剑指Offer-孩子们的游戏(圆圈中最后剩下的数)
package Other; import java.util.LinkedList; /** * 孩子们的游戏(圆圈中最后剩下的数) * 每年六一儿童节,牛客都会准备一些小礼物去看望孤儿院的小朋友, ...
- CorelDraw X8 破解激活问题
在为X8使用特殊辅助手段激活时,通过菜单“帮助”-“产品详细信息”页中的“我有序列号”链接打开对话框,输入序列号激活. 然而,由于安装时要求联网登陆,很有可能获取了试用序列号,导致点击链接后,输入对话 ...