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

指令的作用是把我们自定义的语义化标签替换成浏览器能够认识的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. Eclipse 反编译之 JadClipse

    一:下载对应的 net.sf.jadclipse_x.x.x.jar ,把该jar包放入到Eclipse中的 plugins 目录下,下载地址:https://sourceforge.net/proj ...

  2. 配置/etc/profile错误导致很多系统命令无法使用

    在配置hadoop的环境变量的过程中,由于字符输入错误导致/etc/profile文件出错,并导致系统的基本命令不能使用,如:vi,ls等. 这种情况,首先修改/etc/profile的错误文件内容, ...

  3. 使用Tensorflow和MNIST识别自己手写的数字

    #!/usr/bin/env python3 from tensorflow.examples.tutorials.mnist import input_data mnist = input_data ...

  4. [LeetCode] Binary Tree Postorder题解

    Binary Tree Postorder Given a binary tree, return the postorder traversal of its nodes' values. For ...

  5. 使用jQuery的validation插件实现表单校验

    前端表单校验: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  6. C++输入输出流--<iostream>详解

    C++输入输出流包含在头文件<iostream>中, 流的定义如下:通过设备驱动程序与键盘.屏幕.文件.打印机等进行交互, iostream 类提供与之交互的方法.输出流:输出流的对象是字 ...

  7. 设计模式 UML & java code

    A: 创造性模式 1. 工厂方法模式(FactoryMethod) 1.1 类图 1.2 代码1 public interface Pet { public String petSound(); } ...

  8. Luogu4433:[COCI2009-2010#1] ALADIN(类欧几里德算法)

    先套用一个线段树维护离散化之后的区间的每一段的答案 那么只要考虑怎么下面的东西即可 \[\sum_{i=1}^{n}(A\times i \ mod \ B)\] 拆开就是 \[\sum_{i=1}^ ...

  9. JavaScript周报#185

    This week’s JavaScript news Read this issue on the Web | Issue Archive JavaScript Weekly Issue 185Ju ...

  10. java截取字符串

    public class Temp { public static void main(String[] args) { String a="dsadgafa34"; System ...