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

指令的作用是把我们自定义的语义化标签替换成浏览器能够认识的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. 把IP字符串转换为IPv4标准格式

    把IP字符串转换为IPv4标准格式,如一个IP为127.0.0.1转为127.000.000.001格式? 即是说“点”分隔的数据不够三位数字长度,转换为三位数字长度. Insus.NET有尝试写了一 ...

  2. SpringBoot 之Quartz的使用

    对于Quartz的使用,还是想说一句,SpringBoot真的很好用啊! 第一步:当然是引入依赖啦 <parent> <groupId>org.springframework. ...

  3. 撩课-Java每天5道面试题第18天

    121.描述Struts2的工作原理 客户端发送请求--> 请求经过一系列过滤器-> FilterDispatcher通过 ActionMapper来决定这个Reques t需要调用哪个A ...

  4. js复选框全选反选

    本篇文章是关于复选框的,有2种形式:1.全选.反选由2个按钮实现:2.全选.反选由一个按钮实现. <!DOCTYPE html> <html> <head> < ...

  5. 浅析Java 8新功能Optional

    初识 A container object which may or may not contain a non-null value. 笔者理解,Optional是一个容器类.将Object放到Op ...

  6. python学习之老男孩python全栈第九期_day019作业

    # 计算时间差 import time start_time = time.mktime(time.strptime('2017-09-11 08:30:00','%Y-%m-%d %H:%M:%S' ...

  7. Spring cloud Zuul网关异常处理

    Spring cloud Zuul网关异常处理 一 异常测试: 1> 创建一个pre类型的过滤器,并在该过滤器的run方法实现中抛出一个异常.比如下面的实现,在run方法中调用的doSometh ...

  8. 用fritzing绘制arduino硬件连线图

    在http://fritzing.org/home/ 点击下载最新版本. 解压之后直接可以使用. 打开Fritzing.exe 在点击面包板,在搜索界面输入想要找到的原件拖拽即可放在面包板所在的图上. ...

  9. 转:使用VS Code断点调试PHP

    使用VS Code断点调试PHP vs code 使用一款杰出的轻量级代码编辑器,其中的插件工具不胜枚举而且还在不断增加.使用 vs code 调试 PHP 代码更是方便简洁,下面我们来一起看一下. ...

  10. js笔记 -- toString() 和String()

    将一个值转换成一个字符串有两种方法,一是使用toString()方法,二是使用转型函数String().下面是一些需要注意的问题: 1,大多值都有toString()方法,因为toString是Obj ...