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 ...
随机推荐
- Eclipse 反编译之 JadClipse
一:下载对应的 net.sf.jadclipse_x.x.x.jar ,把该jar包放入到Eclipse中的 plugins 目录下,下载地址:https://sourceforge.net/proj ...
- 配置/etc/profile错误导致很多系统命令无法使用
在配置hadoop的环境变量的过程中,由于字符输入错误导致/etc/profile文件出错,并导致系统的基本命令不能使用,如:vi,ls等. 这种情况,首先修改/etc/profile的错误文件内容, ...
- 使用Tensorflow和MNIST识别自己手写的数字
#!/usr/bin/env python3 from tensorflow.examples.tutorials.mnist import input_data mnist = input_data ...
- [LeetCode] Binary Tree Postorder题解
Binary Tree Postorder Given a binary tree, return the postorder traversal of its nodes' values. For ...
- 使用jQuery的validation插件实现表单校验
前端表单校验: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- C++输入输出流--<iostream>详解
C++输入输出流包含在头文件<iostream>中, 流的定义如下:通过设备驱动程序与键盘.屏幕.文件.打印机等进行交互, iostream 类提供与之交互的方法.输出流:输出流的对象是字 ...
- 设计模式 UML & java code
A: 创造性模式 1. 工厂方法模式(FactoryMethod) 1.1 类图 1.2 代码1 public interface Pet { public String petSound(); } ...
- Luogu4433:[COCI2009-2010#1] ALADIN(类欧几里德算法)
先套用一个线段树维护离散化之后的区间的每一段的答案 那么只要考虑怎么下面的东西即可 \[\sum_{i=1}^{n}(A\times i \ mod \ B)\] 拆开就是 \[\sum_{i=1}^ ...
- JavaScript周报#185
This week’s JavaScript news Read this issue on the Web | Issue Archive JavaScript Weekly Issue 185Ju ...
- java截取字符串
public class Temp { public static void main(String[] args) { String a="dsadgafa34"; System ...