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 ...
随机推荐
- Simotion 监控问题:Could not add self-signed certificate to certificate store.
使用OPC UA 连接设备,在创建客户端证书时总是报这个错误:Could not add self-signed certificate to certificate store.. 解决方法,用管理 ...
- Menustrip控件和ContextMenustrip控件
Menustrip 控件是由System.Windows.Forms.Menustrip类提供,取代了以前的MainMenu控件,是应用程序菜单结构的容器,在建立菜单时,要给Menustrip控件添加 ...
- Odata简介和Demo
转:http://www.cnblogs.com/shanyou/archive/2013/06/11/3131583.html 在SOA的世界中,最重要的一个概念就是契约(contract).在云计 ...
- Linux多进程之间的文件锁
之前对于文件的操作通常在一个进程中完成,最近需要在两个进程中对同一个文件进行操作.故想到了文件锁. Linux下可以使用flock()函数对文件进行加锁解锁等操作.简单介绍下flock()函数: 表头 ...
- 用户登录注册(安全)(常规、FB、google、paypal) 实战
/* 用户登录界面 */elseif ($action == 'login'){ if($_SESSION['user_id']) { ecs_header("Lo ...
- CodeForces 616A(水题)
while(t--) 最后结果t=-1 #include <iostream> #include <string> #include <cstring> #incl ...
- [翻译]Review——Learn these core JavaScript concepts in just a few minutes
Learn these core JavaScript concepts in just a few minutes(只需几分钟即可学习这些核心JavaScript概念) 原文地址:https://m ...
- laravel开发之-安装laravel-admin
1.输入命令:composer require encore/laravel-admin "1.4.*" 2.在config/app.php中添加 :Encore\Admin\Pr ...
- Angular入门教程四
4.8依赖注入DI 通过依赖注入,ng想要推崇一种声明式的开发方式,即当我们需要使用某一模块或服务时,不需要关心此模块内部如何实现,只需声明一下就可以使用了.在多处使用只需进行多次声明,大大提高可复用 ...
- Head First HTML和CSS(一)
Web语言 HTML和CSS是我们用来创建网页的语言. Web服务器存储并提供由HTML和CSS创建的网页,浏览器获取页面,并根据HTML和CSS显示网页的内容 HTML是超文本标记语言(HyperT ...