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,我觉得再也不用自己 ...
随机推荐
- PHP 字符串两边填充补零
str_pad顾名思义这个函数是针对字符串来说的这个可以对指定的字符串填补任何其它的字符串 例如:str_pad(带填补的字符串,填补后的长度,填补字符串,填补位置) 其中填补后的长度必须是个正整数, ...
- springboot 停止
因springboot内嵌tomcat或jetty使得我们没法去操作服务: 因此,常常是服务起来后,要重启时会端口占用,我们只能无情的kill掉端口. 不过spring也设置有配置停止的请求: App ...
- ABAP-语法检查
1.界面 2.代码 *&---------------------------------------------------------------------* *& Report ...
- leetcode 题解： Gray Code
第一眼看到就是枚举,回溯法. n位的ans就是在n-1的ans的基础上,每一个在首位加上1. 但是有个难点,要保证相邻两数之间只有一位在变化,怎么办? 首先 00 00 01 00 01 11 10 ...
- jquery接触初级-----juqery 动画函数
1. window.onload(), 一次只能保存对一个函数的引用:如果多次调用,他会自动用后面的函数覆盖前面的函数 2.$(document).ready(); 会在现有行为上追加新的行为,这些函 ...
- mysql分库分区分表
分表: 分表分为水平分表和垂直分表. 水平分表原理: 分表策略通常是用户ID取模,如果不是整数,可以首先将其进行hash获取到整. 水平分表遇到的问题: 1. 跨表直接连接查询无法进行 2. 我们需要 ...
- ReactiveX 学习笔记（7）聚合操作符
Mathematical and Aggregate Operators 本文的主题为处理 Observable 的聚合操作符. 这里的 Observable 实质上是可观察的数据流. RxJava操 ...
- [jQ]jQuery显式操作Checkbox，并用数组存储关联值的方案
---------------------------------------------------------------------------------------------------- ...
- zabbix 分布式zabbix_proxy
Zabbix是一个分布式监控系统,它可以以一个中心点.多个分节点的模式运行,使用Proxy能大大的降低Zabbix Server的压力,Zabbix Proxy可以运行在独立的服务器上 1)下载zab ...
- unity3d API知识点随记
1.transform.translate是增加transform面板相应的数值x,y,z是以本地坐标系为方向:transform.transformdirection是以世界坐标系为方向,可以去测试 ...