angular插件制作——Directive指令使用详解
1.replace——最简单的使用方法，直接将自定义标签替换为模板内的内容：
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="angular.js" ></script>
<script type="text/javascript" src="template.js" ></script>
</head>
<body ng-app="app">
<template></template>
</body>
</html>
javascipt:
var app=angular.module("app",[])
app.directive("template",function(){
return {
restrict: 'E',
template: '<div>Hi template</div>',
replace: true
}
})
2. transclude(变换）——将自定义标签替换成我们所编写的HTML模板，但是自定义标签内部的内容会保留在具有ng-transclude指令的标签内：
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="angular.js" ></script>
<script type="text/javascript" src="template.js" ></script>
</head>
<body ng-app="app">
<hello>
<br>
<span>使用transclude，自定义标签内部的内容会被保留在模板标签中具有ng-transclude指令的标签内部</span>
</hello>
<hello></hello>
</body>
</html>
javascript:
var appModule = angular.module('app', []);
appModule.directive('hello', function() {
return {
restrict: 'E',
template: '<div>Hi there <span ng-transclude>这里的内容不会显示，只会显示自定义标签内部的内容</span></div>',
transclude: true
};
});
3. link函数——绑定事件到元素上，一个简单的典型的插件就能实现了
css：
.expander {
border: 1px solid black;
width: 250px;
}
.expander>.title {
background-color: black;
color: white;
padding: .1em .3em;
cursor: pointer;
}
.expander>.body {
padding: .1em .3em;
}
html:
var app=angular.module("app",[])
app.directive("temp",function(){
return {
restrict : "EA",
replace : true,
transclude : true,
scope : {
title : '=tempTitle'
},
template : '<div>'
+ '<div class="title" ng-click="toggle()">{{title}}</div>'
+ '<div class="body" ng-transclude ng-show="showMe"></div>'
+ '</div>',
link : function(scope,element,attrs){
scope.showMe=false;
scope.toggle=function(){
scope.showMe=!scope.showMe
}
}
}
})
app.controller("tempCtrl",function($scope){
$scope.title="点我，你能看到更多"
$scope.text="是不是多了几个字"
})
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="angular.js" ></script>
<script type="text/javascript" src="temp.js"></script>
<title></title>
</head>
<body ng-app="app">
<div ng-controller="tempCtrl">
<temp class="expander" temp-title="title">{{text}}</temp>
</div>
</body>
</html>
angular插件制作——Directive指令使用详解的更多相关文章
- SSI指令使用详解（转）
什么是 SHTML使用SSI(Server Side Include)的html文件扩展名,SSI(Server Side Include),通常称为“服务器端嵌入”或者叫“服务器端包含”,是一种类似 ...
- ng-repeat指令使用详解
ng-repeat指令使用详解 link: function(scope,element,attr) scope.$index: if(scope.$last == true){} attr['mng ...
- 提高Java代码质量的Eclipse插件之Checkstyle的使用详解
提高Java代码质量的Eclipse插件之Checkstyle的使用详解 CheckStyle是SourceForge下的一个项目,提供了一个帮助JAVA开发人员遵守某些编码规范的工具.它能够自动化代 ...
- 前端html、CSS快速编写代码插件-Emmet使用方法技巧详解
前端html.CSS快速编写代码插件-Emmet使用方法技巧详解 Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来 ...
- Java中String的intern方法，javap&cfr.jar反编译，javap反编译后二进制指令代码详解，Java8常量池的位置
一个例子 public class TestString{ public static void main(String[] args){ String a = "a"; Stri ...
- Elasticsearch之sense插件安装之后的浏览详解
前提博客是 Elasticsearch之sense插件的安装(图文详解) 立马,可以看到 http://192.168.80.145:5601/app/sense 以后更新
- js插件---videojs中文文档详解
js插件---videojs中文文档详解 一.总结 一句话总结: js插件网上都有很多参考资料,使用起来也非常简单 二.lavarel中使用实例 <video id="example_ ...
- IA-32指令解析详解
IA-32指令解析详解 0x00 前言 这段时间忙于考试,信息论和最优化,还有算法分析,有点让人头大.期间花了几天看SEH机制,能明白个大概,但是对于VC++对于SHE的包装似乎还是不是很明白,发现逆 ...
- jquery图片切换插件jquery.cycle.js参数详解
转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...
随机推荐
- Proftpd 服务器安装配置
yum install proftpd 如果提示没有找到源 rpm -iUvh http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6 ...
- php & 变量引用、函数引用、对象引用
变量的引用 PHP 的引用允许你用两个变量来指向同一个内容 <?php $a="ABC"; $b =&$a; echo $a;//这里输出:ABC ec ...
- air 调用jsfl 执行对应函数，并传参
jsflPath = "WindowSWF/dt_tool_jsfl/" + event.item.fileName+".jsfl"; var element_ ...
- ABAP-2-会计凭证批量数据导入本地ACCESS
ABAP-1-会计凭证批量数据导入本地ACCESS 上一版本出现问题: A.若TXT数据条目超过800万(大概1.3G),则将TXT导入ACCESS过程不成功,ACCESS数据表为空.(Access单 ...
- linux系统安装java环境
参考资料:实测可用 https://www.cnblogs.com/xuliangxing/p/7066913.html
- 【动态规划】最大子段和问题，最大子矩阵和问题，最大m子段和问题
http://blog.csdn.net/liufeng_king/article/details/8632430 1.最大子段和问题 问题定义:对于给定序列a1,a2,a3……an,寻找它 ...
- C++中类的多继承
在写这一主题的文章之前,在网上找到一篇很非常好的文章C++之继承与多态.就没有必要做重复造轮子的事件了,那就从这篇文章开始吧! 在c++中一个类可以从多个基类中派生(即可以有多个父类),这就是多继承. ...
- 计算机网络协议包头赏析-TCP
仍然先把TCP报文段的格式放在这里,然后我们看图说话: TCP报文段也分为首部和数据两部分,首部默认情况下一般是20字节长度,但在一些需求情况下,会使用“可选字段”,这时,首部长度会有所增加. 下面, ...
- Java复习 之多线程
线程是一个程序中的不同路径 例子1 只有一条路径 每一个分支都是一个线程 实际上在一个时刻内 电脑只能运行一个进程 但是因为cpu运算速度很快 将时间分出来了 所以我们感觉是同时运行 创建线程的两种方 ...
- requirejs案例
<script src="./js/require.js" data-main="./js/main.js"></script> / ...