AngularJS自定义Directive不一定返回对象
AngularJS中,当需要自定义Directive时,通常返回一个对象,就像如下的写法:
angular.module('modulename')
.directive('myDirective', function(){
return {
restrict: 'EA', //E表示element, A表示attribute,C表示class,M表示commnent,即注释
scope:{
title: '@' //@读属性值,=双向绑定,&用户函数
}
template: '<div>{{myVal}}</div>',
templateUrl: 'app/sample.html',
controller: 'myController',
link:function($scope, element, attrs){}//DOM操作
};
})
也可以直接返回函数。实际上返回的是link对应的函数。
var app=angular.module('superhero',[]);
app.directive("enter", function(){
return function(scope, element){
element.bind("mouseenter", function(){
console.log('I am inside of you');
})
}
});
app.directive("leave", function(){
return function(scope, element){
element.bind("mouseleave", function(){
console.log('i am leaving on a jet plane');
})
}
})
以上,实际上return没有返回对象,而是返回了一个函数。
在页面中按如下调用:
<div enter leave>I am content</div>
另外,link函数还有一个attrs形参用来描述所有的属性,通过"attrs.属性名"来获取属性值。
app.directive("enter", function(){
return function(scope, element, attrs){
element.bind("mouseenter", function(){
element.addClass(attrs.enter);
})
}
});
app.directive("leave", function(){
return function(scope, element,attrs){
element.bind("mouseleave", function(){
element.removeClass(attrs.enter);
})
}
})
在页面中按如下调用:
<div enter="panel" leave>I am content</div>
AngularJS自定义Directive不一定返回对象的更多相关文章
- AngularJS自定义Directive初体验
通常我们这样定义个module并随之定义一个controller. var app = angular.module('myApp', []); app.controller('CustomersCo ...
- AngularJS自定义Directive
(编辑完这篇之后,发现本篇内容应该属于AngularJS的进阶,内容有点多,有几个例子偷懒直接用了官方的Demo稍加了一些注释,敬请见谅). 前面一篇介绍了各种常用的AngularJS内建的Direc ...
- AngularJS自定义Directive中link和controller的区别
在AngularJS中,自定义Directive过程中,有时用link和controller都能实现相同的功能.那么,两者有什么区别呢? 使用link函数的Directive 页面大致是: <b ...
- AngularJS自定义Directive与controller的交互
有时候,自定义的Directive中需要调用controller中的方法,即Directive与controller有一定的耦合度. 比如有如下的一个controller: app.controlle ...
- 理解AngularJS生命周期:利用ng-repeat动态解析自定义directive
ng-repeat是AngularJS中一个非常重要和有意思的directive,常见的用法之一是将某种自定义directive和ng-repeat一起使用,循环地来渲染开发者所需要的组件.比如现在有 ...
- 利用angularJs自定义指令(directive)实现在页面某一部分内滑块随着滚动条上下滑动
最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(d ...
- angularJs自定义指令(directive)实现滑块滑动
最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(d ...
- AngularJs(Part 11)--自定义Directive
先对自定义Directive有一个大体的映像 myModule.directive('myDirective',function(injectables){ var directiveDefiniti ...
- AngularJs中,如何在父元素中调用子元素为自定义Directive中定义的函数?
最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆 ...
随机推荐
- MySQL用户密码过期登陆报错ERROR 1820 (HY000): You must reset your password using ALTER USER statement before executing this statement.
今天接到主从复制失败告警,查看MySQL,发现MySQL能够登陆但是执行命令报错, ERROR 1820 (HY000): You must reset your password using ALT ...
- sh-copy-id命令报错:-bash: ssh-copy-id: command not found
参考网址:http://www.bubuko.com/infodetail-1662159.html yum -y install openssh-clients
- 一些对外的服务(例如lnmp)都不用root执行
lnmp lamp等需要对外的服务,都不用root用户执行进程 缺点: 如果php程序使用root运行,万一你的程序有漏洞,被拿到了web shell,那么黑客将直接拥有root权限进入你的系统 对于 ...
- 钉钉机器人-实现监控通知功能-python
1. 首先得创建有 一个 钉钉群.(因为只能发群通知) 2. 添加机器人,得到一个url: 3. 开始写Python脚本: # -*- coding: utf-8 -*- ""&q ...
- XSS绕过学习
目录 1绕过单引号 2绕过 SCRIPT 过滤 3使用 IMG 源 4使用制表符 换行符和回车符 5使用空白符 6双引号配对的 bug 7绕过css过滤器 8不全面的过滤器 9转义字符 10编码 ...
- Java第三阶段学习(十一、Servlet基础、servlet中的方法、servlet的配置、ServletContext对象)
一.Servlet简介 1.什么是servlet: sun公司提供的一套规范(接口),用来处理客户端请求.响应给浏览器的动态资源.但servlet的实质就是java代码,通过java的API动态的向 ...
- mysql 主键与外键
一.主键详解,引用自:https://blog.csdn.net/haiross/article/details/50456154 1.要设置主键自增的话字段必须是整形数字. 二.外键详解:引用自ht ...
- ResourceBundle.getBundle方法demo
这个参考链接 http://blog.csdn.net/tgyman/article/details/56012706
- 027.Zabbix的定期备份
一 数据库备份及恢复 1.1:全库备份 [root@zabbix01 ~]# mysqldump -uroot -p123456 --opt zabbix > zabbix.sql [root@ ...
- 001.etcd简介及单节点使用
一 etcd简介 1.1 概述 etcd 是 CoreOS 团队发起的开源项目,是一个管理配置信息和服务发现(service discovery)的项目,它的目标是构建一个高可用的分布式键值(key- ...