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,我觉得再也不用自己 ...
随机推荐
- day01-Python输出
输出 用print加上字符串,就可以向屏幕上输出指定的文字.比如输出'hello, world'>>>print 'hello, world' print语句也可以跟上多个字符串,用 ...
- ORM一对多查询对象
正向查询: 取人民日报出版社出版的所有书籍 方式一: pub_obj = Publish.objects.filter(name='人民日报')[0] ret = Book.objects.filte ...
- Python2 错误记录1File "<string>", line 1, in <module> NameError: name 'f' is not defined
Python 2下 count = 0 while count < 3: user = input('>>>') pwd = input('>>>') if ...
- vue：在路由跳转中使用拦截器
1:首先在路由对象中的某一个具体的路由对象加这样一个属性 meta: { requireAuth:true } 2:然后在main.js中添加这段代码 router.beforeEach((to, ...
- Extjs动态增删组件
在项目中遇到要动态的增加删除一个组件,于是就查找资料,实现了下面的效果. Ext.onReady(function(){ // Ext.Msg.alert("提示","h ...
- 8张思维导图学习javascript
分别归类为: javascript变量 javascript运算符 javascript数组 javascript流程语句 javascript字符串函数 javascript函数基础 javascr ...
- vue项目分辨率
vue项目分辨率写在这里:
- 使用navigator对象,输出当前浏览器的信息
<script type="text/javascript"> with(document) { write("你的浏览器信息:<ol>" ...
- 14.连接池.md
目录 连接池定义 常用开源连接池: DBCP: C3P0 连接池定义 使用统一的规范:javax.sql.DataSource实现统一编程 常用开源连接池: DBCP:tomcat C3P0:hibe ...
- 内存占用过高 kill 调整mysql内存占用
通过 /var/log/messages 查看 被系统kill掉的进程 如果是自己崩溃会产生 hs_err_ 修改mysql my.cnf innodb_buffer_pool_siz ...