AngularJS 自定义指令directive 介绍

---------------------------------------------------------------------------
指令的作用是把我们自定义的语义化标签替换成浏览器能够认识的HTML标签。
指令
link: function (scope, element, attrs, accordionController) {
(1)$scope,与指令元素相关联的作用域
(2)$element,当前元素 ,例如<p> 元素//从元素列表中获取元素,并绑定相应的事件
(3)$attrs,由当前元素的属性对象
(4)$transclude,嵌入链接函数,实际被执行用来克隆元素和操作DOM的函数
举例如下,你可以进行对照理解:
var expModule=angular.module('expanderModule',[])
expModule.directive('accordion', function() {
return {
restrict : 'EA',
replace : true,
transclude : true,
template : '<div ng-transclude></div>',
controller : function() {
var expanders = [];
this.gotOpened = function(selectedExpander) {
angular.forEach(expanders, function(expander) {
if (selectedExpander != expander) {
expander.showMe = false;
}
});
}
this.addExpander = function(expander) {
expanders.push(expander);
}
}
}
});
--------------------------------------------------------------------------------------------------------------

如果还是不太能理解可以看这个链接,这里比较详细,也写的不错http://blog.csdn.net/kongjiea/article/details/49840035
AngularJS 自定义指令directive 介绍的更多相关文章
- angularjs自定义指令Directive
今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...
- angularjs - 自定义指令(directive)
自定义指令(directive) 使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 例子:使用驼峰法来命名一个指令, demoDirect ...
- AngularJS自定义指令directive:scope属性 (转载)
原文地址:http://blog.csdn.net/VitaLemon__/article/details/52213103 一.介绍: 在AngularJS中,除了内置指令如ng-click等,我们 ...
- angularJs自定义指令.directive==类似自定义标签
创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名 ...
- angularjs 一篇文章看懂自定义指令directive
壹 ❀ 引 在angularjs开发中,指令的使用是无处无在的,我们习惯使用指令来拓展HTML:那么如何理解指令呢,你可以把它理解成在DOM元素上运行的函数,它可以帮助我们拓展DOM元素的功能.比如 ...
- 浅析AngularJS自定义指令之嵌入(transclude)
AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...
- AngularJs自定义指令详解(1) - restrict
下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...
- AngularJS: 自定义指令与控制器数据交互
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- angularJs 自定义指令传值---父级与子级之间的通信
angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...
随机推荐
- amazeui笔记-CSS 布局相关
CSS 等分网格: 说明:.am-avg-sm-2 数字表示几等分 会将子元素 <li>的宽度设置为 50%. 只能用于 <ul> / <ol> 结构 辅助类: ...
- Redis 【Hash】 一句话说明
HDEL-----------------------------------------------------------哈希表 key 中的一个或多个指定域 HEXISTS----------- ...
- SQL Serever学习13——数据库编程语言
编程基础 注释 注释命名来对一些语句进行说明,便于日后维护或者其他用户理解,注释不会执行. 单行注释 SELECT GETDATE() --查询当前日期 多行注释 /* 注释有助于 理解操作的内容 查 ...
- 联想G480安装固态硬盘过程
联想G480安装固态硬盘过程 百度上面图文并茂: https://jingyan.baidu.com/article/e2284b2b68eaf6e2e6118de1.html
- 微信小程序随笔。笔记本忘家里了
所有ui组件都有的共有属性id.class.style.hidden.data-*.bind* / catch*.
- 工作经验:Java 系统记录调用日志,并且记录错误堆栈
前言:现在有一个系统,主要是为了给其他系统提供数据查询接口的,这个系统上线不会轻易更新,更不会跟随业务系统的更新而更新(这也是有一个数据查询接口系统的原因,解耦).这时,这个系统就需要有一定的方便的线 ...
- OpenStack IceHouse 部署 - 4 - 计算节点部署
Nova计算服务(计算节点) 参考 本页内容依照官方安装文档进行,具体参见Configure a compute node(nova service) 前置工作 数据库 由于我们在Nova(计算管理 ...
- JavaScript & jQuery & Bootstrap
一.前言 javascript 简称 JS 与java编程语言 没有什么关系 JavaScript: {核心(ECMAScript) 文档对象模型(DOM) Document object mode ...
- 教程:让你的表单升级到CSS3和HTML5客户端验证
今天我们一起来看看如何创建一个实用并且功能强大的表单,表单使用如今最热门的技术HTML5和css3来创建,并且可以通过HTML5进行客户端验证. 查看预览下载附件 第一步:策划表单功能 首先,我们得为 ...
- Maven学习总结(四):更改maven的编码格式方式
安装系统之后,一般中文系统默认字符集是GBK.我们安装的软件一般都继承使用操作系统的默认字符集.所以当在中文XP或者win7系统开发,在使用maven(mvn compile)编译项目的时候,就会出现 ...