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#多线程之异步编程
c#中异步编程,主要有两种方法: 1.委托的异步调用: 2.Task的await,async (c# 4.5) 我们来看例子: /// <summary> /// 异步保存网页,url:网 ...
- ajax+struts2 实现省份-城市-地区三级联动
1.需求分析 2.js部分(通过ajax异步请求实现) 省份-->城市联动 城市-->地区 3.struts部分 struts.xml action部分 4.service部分 5.总结 ...
- Handsontable添加超链接
本文在上文的基础上,返回的数据中多了一个link超链接跳转的字段,,需要在Handsontable中显示超链接. <!DOCTYPE html> <html> <head ...
- 使用Python从Workflowy同步大纲到印象笔记
title: 从Workflowy到印象笔记 toc: true comment: true date: 2018-03-17 10:05:54 tags: ["Python", ...
- Android消息机制解析
我们知道在编程时许多操作(如更新UI)需要在主线程中完成,而且,耗时操作(如网络连接)需要放在子线程中,否则会引起ANR.所以我们常使用Handler来实现线程间的消息传递,这里讨论的也就是Handl ...
- SIMD---SSE系列及效率对比
SSE(即Streaming SIMD Extension),是对由MMX指令集引进的SIMD模型的扩展.我们知道MMX有两个明显的缺点: 只能操作整数. 不能与浮点数同时运行(MMX使用FPU寄存器 ...
- 1-2 maven学习笔记(7-8章)
一,生命周期和插件 1.除了坐标.依赖和仓库之外,maven的另外两个核心概念就是声明周期和插件. 生命周期和插件协同工作,密不可分. 清理 初始化 编译 测试 打包 集成测试 验证 部署 站点生成 ...
- angularJS使用rootscope创建父域和子模态框通用的属性与函数
1. 在声明创建controller指明引用$rootscope reviewInterfaceDo.controller('reviewInterfaceDo', function($scope, ...
- Vue之八 HTML5 History模式
nginx配置 location / { root /webroot/www/ShopMall3; try_files $uri $uri/ /index.html; } /:访问路径: root:服 ...
- linux --> Linux 的启动流程
Linux 的启动流程 操作系统接管硬件以后发生的事情,也就是操作系统的启动流程. 因为在BIOS阶段,计算机的行为基本上被写死了,程序员可以做的事情并不多:但一旦进入操作系统,程序员几乎可以定制所有 ...