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并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆 ...
随机推荐
- 用《舌尖2》去理解C#中的多态和开闭原则
昨天晚上看了<舌尖上的中国2>第一集,特别的感人,尤其是看到帮别人割麦子的麦客,一亩地开价200,雇主只肯给100,脸上的那种纠结和无可奈何.还有长着大眼睛的跳跳鱼,很可爱,不过最终还是被 ...
- FTP主动/被动原理
FTP 主动模式 1.客户端用大于1024的高位端口发起初始化连接到vsftp服务器的21端口 2.vsftp服务器的21端口主动与客户端大于1024的高位端口建立控制连接 3.vsftp服务器的20 ...
- MYSQL 的 MASTER到MASTER的主主循环同步
MYSQL 的 MASTER到MASTER的主主循环同步 刚刚抽空做了一下MYSQL的主主同步.把步骤写下来,至于会出现的什么问题,以后随时更新.这里我同步的数据库是TEST1.环境描述. 主 ...
- oracle日期、转换函数
转换函数 日期类型转换成字符类型 select to_char(sysdate) s1, --14-3月 -16 to_char(sysdate, 'yyyy-mm-dd') s2, - ...
- LeetCode(20):有效的括号
Easy! 题目描述: 给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合. 左括号必须以正确的顺序闭 ...
- Linux下配置MySQL需要注意的几点
1.为mysql加上连接数,linux下最大能允许8000个mysql连接. 经验下,设置为3000 [mysqld] max_connections=3000
- [转]Kubernetes TLS bootstrapping 那点事
这个写得确实专业, 转一下收藏. https://mritd.me/2018/01/07/kubernetes-tls-bootstrapping-note/ 阅读本文章前,请先阅读一下本文参考的相关 ...
- jdk windows环境变量
(1)新建->变量名"JAVA_HOME",变量值"C:\Java\jdk1.8.0_05"(即JDK的安装路径) (2)编辑->变量名" ...
- Codeforces 908F New Year and Rainbow Roads
New Year and Rainbow Roads 思路:我们考虑两个绿点之间的红点和蓝点, 首先把这些红点和蓝点接到绿点上面绝对不会超过绿点距离的两倍. 然后我们先把两个绿点连上, 再把绿点经过蓝 ...
- hadoop2.6.4的HA集群搭建超详细步骤
hadoop2.0已经发布了稳定版本了,增加了很多特性,比如HDFS HA.YARN等.最新的hadoop-2.6.4又增加了YARN HA 注意:apache提供的hadoop-2.6.4的安装包是 ...