---------------------------------------------------------------------------

指令的作用是把我们自定义的语义化标签替换成浏览器能够认识的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 介绍的更多相关文章

  1. angularjs自定义指令Directive

    今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...

  2. angularjs - 自定义指令(directive)

    自定义指令(directive) 使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 例子:使用驼峰法来命名一个指令, demoDirect ...

  3. AngularJS自定义指令directive:scope属性 (转载)

    原文地址:http://blog.csdn.net/VitaLemon__/article/details/52213103 一.介绍: 在AngularJS中,除了内置指令如ng-click等,我们 ...

  4. angularJs自定义指令.directive==类似自定义标签

    创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名 ...

  5. angularjs 一篇文章看懂自定义指令directive

     壹 ❀ 引 在angularjs开发中,指令的使用是无处无在的,我们习惯使用指令来拓展HTML:那么如何理解指令呢,你可以把它理解成在DOM元素上运行的函数,它可以帮助我们拓展DOM元素的功能.比如 ...

  6. 浅析AngularJS自定义指令之嵌入(transclude)

    AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...

  7. AngularJs自定义指令详解(1) - restrict

    下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...

  8. AngularJS: 自定义指令与控制器数据交互

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. angularJs 自定义指令传值---父级与子级之间的通信

    angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...

随机推荐

  1. amazeui笔记-CSS 布局相关

    CSS 等分网格: 说明:.am-avg-sm-2  数字表示几等分 会将子元素 <li>的宽度设置为 50%. 只能用于 <ul> / <ol> 结构 辅助类: ...

  2. Redis 【Hash】 一句话说明

    HDEL-----------------------------------------------------------哈希表 key 中的一个或多个指定域 HEXISTS----------- ...

  3. SQL Serever学习13——数据库编程语言

    编程基础 注释 注释命名来对一些语句进行说明,便于日后维护或者其他用户理解,注释不会执行. 单行注释 SELECT GETDATE() --查询当前日期 多行注释 /* 注释有助于 理解操作的内容 查 ...

  4. 联想G480安装固态硬盘过程

    联想G480安装固态硬盘过程  百度上面图文并茂: https://jingyan.baidu.com/article/e2284b2b68eaf6e2e6118de1.html

  5. 微信小程序随笔。笔记本忘家里了

    所有ui组件都有的共有属性id.class.style.hidden.data-*.bind* / catch*.

  6. 工作经验:Java 系统记录调用日志,并且记录错误堆栈

    前言:现在有一个系统,主要是为了给其他系统提供数据查询接口的,这个系统上线不会轻易更新,更不会跟随业务系统的更新而更新(这也是有一个数据查询接口系统的原因,解耦).这时,这个系统就需要有一定的方便的线 ...

  7. OpenStack IceHouse 部署 - 4 - 计算节点部署

    Nova计算服务(计算节点)  参考 本页内容依照官方安装文档进行,具体参见Configure a compute node(nova service) 前置工作 数据库 由于我们在Nova(计算管理 ...

  8. JavaScript & jQuery & Bootstrap

    一.前言 javascript 简称 JS  与java编程语言 没有什么关系 JavaScript: {核心(ECMAScript) 文档对象模型(DOM) Document object mode ...

  9. 教程:让你的表单升级到CSS3和HTML5客户端验证

    今天我们一起来看看如何创建一个实用并且功能强大的表单,表单使用如今最热门的技术HTML5和css3来创建,并且可以通过HTML5进行客户端验证. 查看预览下载附件 第一步:策划表单功能 首先,我们得为 ...

  10. Maven学习总结(四):更改maven的编码格式方式

    安装系统之后,一般中文系统默认字符集是GBK.我们安装的软件一般都继承使用操作系统的默认字符集.所以当在中文XP或者win7系统开发,在使用maven(mvn compile)编译项目的时候,就会出现 ...