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

指令的作用是把我们自定义的语义化标签替换成浏览器能够认识的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. [javaSE] 基本数据类型对象包装类

    按照java面向对象的原则,每个基本类型都有对应的包装类 byte Byte short Short int Integer long Long boolean Boolean float Float ...

  2. 二:SpringCloud-Eureka

    五:Eureka服务注册与发现 1. 是什么 Spring Cloud 封装了 Netflix 公司开发的 Eureka 模块来实现==服务注册和发现==(请对比Zookeeper). Eureka ...

  3. veloctiy入门

    什么是velocity? velocity是一个基于Java的模板引擎.你可以使用它来预定义模板,并且对模板进行数据渲染,从而动态生成相应的文本.它如同JSP一样经常被使用在MVC分层架构当中,充当V ...

  4. 解决-word里无论怎么改变字体颜色,字体总是红色的

    1.你遇到的问题是Word当前处于审阅状态,修改的内容显示为红色字体.2.解决办法是退出Word审阅状态,或者接受全部修订.3.不同Word版本的审阅模式不同,可在菜单栏里退出审阅,或者按鼠标右键弹出 ...

  5. 【SSH网上商城项目实战23】完成在线支付功能

     转自: https://blog.csdn.net/eson_15/article/details/51464415 上一节我们做好了支付页面的显示,从上一节支付页面显示的jsp代码中可以看出,当用 ...

  6. UOJ#316. 【NOI2017】泳池

    传送门 一道 \(DP\) 好题 设 \(q\) 为一个块合法的概率 套路一恰好为 \(k\) 的概率不好算,算小于等于 \(k\) 的减去小于等于 \(k-1\) 的 那么设 \(f_i\) 表示宽 ...

  7. 虚树(Bzoj3611: [Heoi2014]大工程)

    题面 传送门 虚树 把跟询问有关的点拿出来建树,为了方便树\(DP\) 在\(LCA\)处要合并答案,那么把这些点的\(LCA\)也拿出来 做法:把点按\(dfs\)序排列,然后求出相邻两个点的\(L ...

  8. 关于echarts绘制树图形的注意事项(文字倾斜、数据更新、缓存重绘问题等)

    最近项目中使用到echarts的树操作,对其中几点注意事项进行下总结. 效果图: 1.基础配置 options的配置如下: { tooltip: { trigger: 'item', triggerO ...

  9. VUE配置项结构

    VUE配置项结构 config:项目的配置文件 index.js: 基础的配置信息 dev.env.js:开发环境配置信息 prod.env.js:线上环境配置信息 build: 项目打包所需要的内容 ...

  10. 简易搭建git仓库、关联远程和本地仓库方法。克隆仓库方法。同一台电脑上创建两个git ssh key方法。

    一,在github上建仓库 react-js-antd-demo: 二:将远程仓库与本地仓库关联 git remote add origin git@github.com:begin256/react ...