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 ...
随机推荐
- 关于在Django中Json无法序列化datetime的解决办法
我们在网页设计时经常会在前端和后台进行交互,前端回传的方法可以时redirect一个地址加上显式的参数,第二个办法就是使用Ajax结构.那么在传到view函数中进行处理后是需要通过Json格式进行返回 ...
- c# 多线程同步之Mutex
说起Mutex,它的中文名字叫互斥体.它是WaitHandle家族成员之一,前面有一篇介绍过WaitHandle的家族成员构成.那么Mutex有什么作用呢?它是怎么使用的? 我们先来看看它的使用场景一 ...
- Hello English Again
Currently, I just want to write something in English.Maybe I just want to review my Egnlish knowledg ...
- ubuntu安装Eclipse无图标(手动创建软件图标) —— 其他的软件也一样
//退回根目录 cd / //进入图标存放目录 cd usr/share/applications/ //用文本编辑器打开打开eclipse的图标文件,没有会自动创建 sudo gedit eclip ...
- CentOS7.2下Nginx的使用
Nginx的启动 指定配置文件的方式启动 nginx -c /etc/nginx/nginx.conf 对于yum安装的nginx,使用systemctl命令启动 systemctl start ng ...
- 集合详解(python)
集合概念 集合是一个数学概念:由一个或多个确定的元素所构成的整体叫做集合. 集合中的元素三个特征: 确定性(元素必须可hash) 互异性(去重)--将一个列表变为集合,就自动去重了 无序性(集合中的元 ...
- 格式化JSON数据
function formatJson(json, options) { var reg = null, formatted = '', pad = 0, PADDING = ' '; options ...
- poj-1218 THE DRUNK JAILER 喝醉的狱卒
自己去看看原题; 题目大意: 就是一个狱卒喝醉了,他第一趟吧所有的监狱都带开,第二趟把能把二整除的监狱关闭,第三趟操作能把三整除的监狱; 求最后能逃跑的罪犯数 输入第一个数是代表 测试数据组数 每个数 ...
- Python -- Records项目学习
Records学习笔记 Records链接地址 1. __getitem__(self, key) 内建方法(Build-in) 例子: class Test(object): def __getit ...
- android中与SQLite数据库相关的类
为什么要在应用程序中使用数据库?数据库最主要的用途就是作为数据的存储容器,另外,由于可以很方便的将应用程序中的数据结构(比如C语言中的结构体)转化成数据库的表,这样我们就可以通过操作数据库来替代写一堆 ...