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,我觉得再也不用自己 ...
随机推荐
- day25-面向对象结构与成员
1.面向对象结构分析 如下面的图所示:面向对象整体大致分两块区域: 每个大区域又可以分为多个小部分: class A: name = 'Tom' # 静态变量(静态字段) __iphone = '13 ...
- es6初级之箭头函数实现隔行变色
无论是使用哪种方式实现隔行变色的效果,它的思路都是一样的: 1.定义很多个div 2.给div 加背景 3.鼠标移动到div上时,当前div 背景变色 4.鼠标移出div时,当前div背景恢复 以上4 ...
- jquery接触初级-----ajax 之：load()方法
jquery _ajax 请求主要有几种方式:load(),$.get(),$.post(),$.ajax(),$.getScript(),$.getJson() 1.load()方法 格式:load ...
- leetcode ex3 找出穿过最多点的直线 Max Points on a Line
题目 https://oj.leetcode.com/problems/max-points-on-a-line/ 答案与分析 http://www.aiweibang.com/yuedu/18326 ...
- CSS: Position Introduction.
brief introduction: detailed introduction: ①absolute locate:http://www.runoob.com/try/try.php?filena ...
- Redis进阶实践之一VMWare Pro虚拟机安装和Linux系统的安装（转载）（1）
Redis进阶实践之一VMWare Pro虚拟机安装和Linux系统的安装 一.引言 设计模式写完了,相当于重新学了一遍,每次学习都会有不同的感受,对设计模式的理解又加深了,理解的更加透彻了.还差一篇 ...
- 【剑指offer】从尾到头翻转打印单链表
#include <iostream> #include <vector> #include <stack> using namespace std; struct ...
- 11.枚举类.md
目录 1.定义: 2.枚举类和普通类的区别: 2.1枚举类的简单构建: 2.2枚举类的成员变量.方法和构造 2.3实现接口的枚举类 1.定义: 2.枚举类和普通类的区别: 枚举类的默认修饰符是 pub ...
- C++ 关于 CMFCPropertyGridCtrl 的使用方法 之一 (原创)
题外话: 最近在写一个重要的程序,想做的更灵活一些,于是想采用属于对话框的形式,如图所示 但查了好几本大部门的C++及MFC的书,还有很多的网上的资料,这方面的介绍实在是少之又少.不过,好在VS201 ...
- h5内容初探
h5简介: h5新特性 h5新增标签 article 和 section 的区别相当于 div 和 p标签的区别 1—6都是块级元素 h5新增属性 拖放 拖动事件 <style> ...