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,我觉得再也不用自己 ...
随机推荐
- 用U盘制作启动盘后空间变小的恢复方法
先把u盘插好, 运行cmd(按住键盘左下角第二个windows键的同时按R), 输入diskpart,回车, (此时可以再输入list disk,回车,能看到这台电脑的所有磁盘大致情况,u盘一般是磁盘 ...
- web安全/渗透测试--1--web安全原则
web 安全: https://blog.csdn.net/wutianxu123/article/category/8037453/2 web安全原则 安全应该是系统开发之初就考虑的问题.换句话说 ...
- HashMap.put()和get()原理
/** * Returns the value to which the specified key is mapped, * or if this map contains no mapping f ...
- day08-字符串操作
name = 'hello,world,WORLD! 123,你好' #capitalize()#首字母大写,其他全部变成小写,没有iscapitalize()方法print(name.capital ...
- ABAP-权限查询-用户信息系统
事务代码:SUIM
- jquery 设计的思路-----初级
jquery.js 很经典,其中有一些设计思路简直非常经典 1.安全的创建一个构造函数并进行调用: <script> // 这是一种安全的构造函数的创建方法,在调用构造函数G的时候,不论使 ...
- es6 初级之---const 和 默认参数
1. const 的定义: 1.1 常量定义的时候要赋值,不赋值是会报错的: <!DOCTYPE html> <html lang="en"> <he ...
- JSP基本_JavaBeans
1.JavaBeansとはJavaBeansとは.ある機能を一つにまとめたクラスです.Webアプリケーションでは.JavaBeansは主にデータ操作に使用します.データ管理のプログラムをJavaBea ...
- 拓展Scene视图——场景编辑Vector2/3
Test.cs using System.Collections; using System.Collections.Generic; using UnityEngine; public class ...
- Python中fileinput模块使用方法
fileinput模块提供处理一个或多个文本文件的功能,可以通过使用for循环来读取一个或多个文本文件的所有行.python2.7文档关于fileinput介绍:fileinput fileinp ...