angular directive自定义指令
先来看一下自定义指令的写法
app.directive('', ['', function(){
// Runs during compile
return {
// name: '',
// priority: 1,
// terminal: true,
// scope: {}, // {} = isolate, true = child, false/undefined = no change
// controller: function($scope, $element, $attrs, $transclude) {},
// require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
// restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
// template: '',
// templateUrl: '',
// replace: true,
// transclude: true,
// compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
link: function($scope, iElm, iAttrs, controller) {
}
};
}]);
restrict : A E C M A代表attribute属性，E代表element元素，C代表class类，M代表注释（C和M基本不用）
priority：指令的优先级 ng-repeat的优先级为1000最大，默认的优先级为1
terminal: 是否禁止 低于当前优先级的指令
template:html字符串/返回html的函数
templateUrl:' ',这个不解释了，一时想不起来怎么解释了
replace : true/false true会替换掉标签<hello>内所有的内容 浏览器 ，除了transclude的内容 / false不会替换，遇见不识别的标签只是忽略了
transclude : true/false true保留原始的html放置在有ng-transclude指令的标签里 transclude 和replace结合使用可以保留自定义标签里想要的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>replaceDemo</title>
<script src="../Scripts/angular-1.5.8/angular.min.js"></script>
<script>
//replace为
//1 true会替换掉标签<hello>内所有的内容 浏览器 ，除了transclude的内容，
//2 false不会替换，遇见不识别的标签只是忽略了
//transclude 和replace结合使用可以保留自定义标签里想要的内容
angular.module('myApp',[])
.directive("hello",function(){
return {
restrict:'E',
template:'<div>Hi here <sapn ng-transclude></sapn></div>',
replace:true,
transclude:true
}
})
</script>
</head>
<body ng-app="myApp">
<hello>
<br>
<span>原始的内容，</span><br/>
<span>还会在这里。</span>
</hello>
</body>
</html>
scope: false,true,对象{}
false: 当前定义的指令使用父作用域（父作用域和子作用域一样共享）
true：当前指令继承父作用域（子作用域有父作用域的所有数据，但父作用域就不一定有子作用域的一些隐私的数据了，就像儿子从父亲那里继承一样，父亲能从儿子那能得到多少就呵呵了）
对象{}: 指定一些数据从父作用域中继承过来
对象的详细用法：
形如scope:{
string:'@string',//@单向绑定
data:'=data',//=双向绑定
function:'&function'//&继承父作用域的函数
}
提示 @ = 后面跟的都是属性 使用restrict: 'E' 作为元素<say-hello>
<say-hello speak="{{content}}">美女</say-hello>
con:'@speak' <say-hello speak="content">美女</say-hello>
con:'=speak'
使用restrict:'A' 作为属性<div say-hello> <div say-hello speak="{{content}}">美女</div>
con:'@speak'
<div say-hello speak="content">美女</div>
con:'=speak'
<div say-hello="{{content}}">美女</div>
con:'@sayHello' <div say-hello="content">美女</div>
con:'=sayHello'
&的使用（写代码的时候总是出错有时不是代码错了，有可能是是没有深度刷新ctrl+F5）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../Scripts/angular-1.5.8/angular.min.js"></script> </head>
<body>
<div ng-app="testApp" ng-controller="testC">
<say-hello on-send="onSend()">heng</say-hello>
<div say-hello on-send="onSend()">hehe</div>
</div> <script>
angular.module("testApp",[]).controller('testC',function($scope){
$scope.onSend=function(){
console.log('hehe')
};
}).directive("sayHello",function(){
return {
restrict:'EA',
scope:{
send:'&onSend'
},
transclude:true,
template:'<div><button ng-click="send()">directive</button><span ng-transclude></span></div>',
controller:function($scope){
$scope.send();
}
}
})
</script>
</body>
</html>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../Scripts/angular-1.5.8/angular.min.js"></script> </head>
<body>
<div ng-app="testApp" ng-controller="testC">
{{content}}
<say-hello speak="content">美女</say-hello>
</div>
<script>
angular.module("testApp",[]).controller('testC',function($scope){
$scope.content="早上好";
}).directive("sayHello",function(){
return {
restrict:'E',
transclude:true,
template:'<div>Hi ! <b ng-transclude></b>{{con}}{{content}}</div>',
scope:{
con:'=speak',
},
controller:function($scope){
//$scope.con="hehe";
//$scope.content="haha"
}
}
})
</script>
</body>
</html>
controller：自定义指令的控制器
require : 'ngModel'或者 形如'^?accordion' ngModel是ng-model的控制器详情，accordion是继承其他的控制器， ^代表在父级作用域查找，？代表未查找到不抛出异常，默认在自身作用域查找
link:function(scope,element,attribute,controller){}
scope:当前作用域，element:当前指令的DOM节点,attribute：当前指令的属性，controller当前指令的控制器
有人会问两个controller？
关于directive里的link和controller区别？
1、执行顺序：先controller后link
2、何时使用controller：一般场景下都不想要使用controller，只需要把逻辑写在link中就可以了；用controller的场景就是该指令（假设为a）会被其他指令（假设为b）require的时候，这样就会在b指令的link函数中传入这个controller（如果require多个的话，传入的是一个数组，数组中存放的是每一个require的指令对应的controller），目的很显然是为了指令间进行交流的。
compile这里就不介绍了只要就到这里，好像用了link就不需要compile...
下面是两个实例的代码，折叠和手风琴
参考：http://www.360doc.com/content/15/0602/16/203871_475147642.shtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>折叠</title>
<script src="../Scripts/angular-1.5.8/angular.min.js"></script>
<script>
var app=angular.module("myApp",[]);
app.controller("testCtrl",function($scope){
$scope.title="个人简介";
$scope.text="我是一个程序员";
})
app.directive("expander",function(){
return {
restrict:'E',
template:'<div><h3 ng-click="toggle()">{{title}}</h3><div ng-transclude ng-show="showText"></div></div>',
transclude:true,
replace:true,
scope:{
title:'=etitle'
},
link:function(scope,elem,attr,controller){
scope.showText=false;
scope.toggle=function(){
scope.showText=!scope.showText;
}
}
}
})
</script>
</head>
<body ng-app="myApp">
<div ng-controller="testCtrl">
<expander etitle="title">{{text}}</expander>
<expander etitle="title">{{text}}</expander>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴</title>
<script src="../Scripts/angular-1.5.8/angular.min.js"></script>
<script>
var app=angular.module("myApp",[]);
app.controller("testCtrl",function($scope){
$scope.expanders=[{title:'个人简介',text:'我是一个程序员'},{title:'个人简介1',text:'我是一个程序员'},{title:'个人简介2',text:'我是一个程序员'}]
})
app.directive("accordion",function(){
return {
restrict:'E',
template:'<div ng-transclude></div>',
transclude:true,
replace:true,
controller:function(){
var expanders=[];
this.getSelected=function(selected){
angular.forEach(expanders,function(e){
if(selected!=e){
e.showText=false;
}
})
}
this.add=function(e){
expanders.push(e);
}
}
}
})
app.directive("expander",function(){
return {
restrict:'E',
template:'<div><h3 ng-click="toggle()">{{title}}</h3><div ng-transclude ng-show="showText"></div></div>',
transclude:true,
replace:true,
scope:{
title:'=etitle'
},
require:'^?accordion',//'accordin'是在自身作用域查找，^ 在父作用域查找 ，？没有查找到不会抛出异常
link:function(scope,elem,attr,controller){
console.log(scope);
scope.showText=false;
controller.add(scope)
scope.toggle=function(){
scope.showText=!scope.showText;
controller.getSelected(scope);
}
}
}
})
/*1、执行顺序：先controller后link
2、何时使用controller：一般场景下都不想要使用controller，只需要把逻辑写在link中就可以了；用controller的场景就是该指令（假设为a）会被其他指令（假设为b）require的时候，这样就会在b指令的link函数中传入这个controller（如果require多个的话，传入的是一个数组，数组中存放的是每一个require的指令对应的controller），目的很显然是为了指令间进行交流的。*/
</script>
</head>
<body ng-app="myApp">
<div ng-controller="testCtrl">
<accordion>
<expander ng-repeat="expander in expanders" etitle="expander.title">{{expander.text}}</expander>
</accordion>
</div>
</body>
</html>
--内容只是作为笔记，有些东西纯属仿照--
参考文档：http://www.cnblogs.com/webHero/p/5770703.html
angular directive自定义指令的更多相关文章
- Angular的自定义指令以及实例
本文章已收录于: AngularJS知识库 分类: javascript(55) http://www.cnblogs.com/xiaoxie53/p/5058198.html 前面的文章介 ...
- Vue2.x directive自定义指令
directive自定义指令 除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令. 注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而,有的 ...
- Vue.directive 自定义指令
一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在 ...
- Vue2.0 【第二季】第1节 Vue.directive自定义指令
目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令 一.什么是全局API? 二. Vue.directive自定义指令 三.自定义指令中传递的三个参数 四.自定义指令的生命周期 ...
- Vue.directive 自定义指令的问题
1.今天复习一下Vue自定义指令的代码,结果出现一个很无语的结果,先贴代码. 2. <div id="example" v-change-by="myColor&q ...
- Vue.directive自定义指令
Vue除了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-diy的指令,作用就是让文字变成红色. 写好了这个功能,我们现在就自己定义一个全局的指令.我们这里使用Vue.directi ...
- Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式
前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...
- Vue.js（16）之 directive自定义指令
推荐阅读:Vue.directive基础,在Vue模块开发中使用 全局指令 Vue.directive('全局自定义指令名称', { /* 自定义指令配置对象 */ }) 私有指令 <templ ...
- -_-#【Angular】自定义指令directive
AngularJS学习笔记 <!DOCTYPE html> <html ng-app="Demo"> <head> <meta chars ...
随机推荐
- 数字图像处理界标准图像 Lena 后面的故事
熟悉图像处理或者压缩的工程师.研究人员和学生,经常在他们的实验或者项目任务里使用"Lenna"或者"Lena"的图像.Lenna 图像已经成为被广泛使用的测试图 ...
- 【Java学习笔记之三十一】详解Java8 lambda表达式
Java 8 发布日期是2014年3月18日,这次开创性的发布在Java社区引发了不少讨论,并让大家感到激动.特性之一便是随同发布的lambda表达式,它将允许我们将行为传到函数里.在Java 8之前 ...
- 【javascript】详解变量，值，类型和宿主对象
前言 我眼中的<javascript高级程序设计> 和<你不知道的javascript>是这样的:如果<javascript高级程序设计>是本教科书的话, < ...
- redis集群搭建及注意事项
上一篇:redis的安装及注意事项 这里,在一个Linux虚拟机上搭建6个节点的redis伪集群,思路很简单,一台虚拟机上开启6个redis实例,每个redis实例有自己的端口.这样的话,相当于模拟出 ...
- Nginx + Memcached 实现Session共享的负载均衡
session共享 我们在做站点的试试,通常需要保存用户的一些基本信息,比如登录就会用到Session:当使用Nginx做负载均衡的时候,用户浏览站点的时候会被分配到不同的服务器上,此时如果登录后Se ...
- JavaScript--我发现，原来你是这样的JS（基础概念--躯壳，不妨从中文角度看js）
介绍 这是红宝书(JavaScript高级程序设计 3版)的读书笔记第二篇(基础概念--躯壳篇),有着部分第三章的知识内容,当然其中还有我个人的理解.红宝书这本书可以说是难啃的,要看完不容易,挺厚的, ...
- Myeclipse 自定义java代码快捷键
1.首先在MyEclipse菜单栏找到"windows"下拉菜单中找到首选项(英文Prefenerces),弹出首选项界面. 2.打开java -->editor---& ...
- 第3阶段——内核启动分析之创建si工程和分析stext启动内核函数(4)
目标: (1)创建Source Insight 工程,方便后面分析如何启动内核的 (2)分析uboot传递参数,链接脚本如何进入stext的 (3) 分析stext函数如何启动内核: (3.1) ...
- 第1阶段——uboot分析之仿照bootm制作hello命令(7)
仿照bootm命令生成来制作一个hello命令,功能:打印出hello,world!和参数值 1.点击New File ,创建cmd_hello.c将./common/cmd_bootm.c的头文件复 ...
- 32位汇编第三讲,RadAsm,IDE的配置和使用,以及汇编代码注入方式
32位汇编第三讲,RadAsm,IDE的配置和使用,以及汇编代码注入方式 一丶RadAsm的配置和使用 用了怎么长时间的命令行方式,我们发现了几个问题 1.没有代码提醒功能 2.编写代码很慢,记不住各 ...