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不一定返回对象的更多相关文章

  1. AngularJS自定义Directive初体验

    通常我们这样定义个module并随之定义一个controller. var app = angular.module('myApp', []); app.controller('CustomersCo ...

  2. AngularJS自定义Directive

    (编辑完这篇之后,发现本篇内容应该属于AngularJS的进阶,内容有点多,有几个例子偷懒直接用了官方的Demo稍加了一些注释,敬请见谅). 前面一篇介绍了各种常用的AngularJS内建的Direc ...

  3. AngularJS自定义Directive中link和controller的区别

    在AngularJS中,自定义Directive过程中,有时用link和controller都能实现相同的功能.那么,两者有什么区别呢? 使用link函数的Directive 页面大致是: <b ...

  4. AngularJS自定义Directive与controller的交互

    有时候,自定义的Directive中需要调用controller中的方法,即Directive与controller有一定的耦合度. 比如有如下的一个controller: app.controlle ...

  5. 理解AngularJS生命周期:利用ng-repeat动态解析自定义directive

    ng-repeat是AngularJS中一个非常重要和有意思的directive,常见的用法之一是将某种自定义directive和ng-repeat一起使用,循环地来渲染开发者所需要的组件.比如现在有 ...

  6. 利用angularJs自定义指令(directive)实现在页面某一部分内滑块随着滚动条上下滑动

    最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(d ...

  7. angularJs自定义指令(directive)实现滑块滑动

    最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(d ...

  8. AngularJs(Part 11)--自定义Directive

    先对自定义Directive有一个大体的映像 myModule.directive('myDirective',function(injectables){ var directiveDefiniti ...

  9. AngularJs中,如何在父元素中调用子元素为自定义Directive中定义的函数?

    最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆 ...

随机推荐

  1. 查看IP以及连接数

    AWK: time awk 'BEGIN{while("netstat -an"|getline){if( $5 ~ /[1-255]/){split($5,t1,":& ...

  2. 修改history记录数门限

    你的 Bash 命令历史保存的历史命令的数量可以在 ~/.bashrc 文件里设置.在这个文件里,你可以找到下面两行: HISTSIZE=1000 HISTFILESIZE=2000 HISTSIZE ...

  3. linux定时器【转】

    转自:http://www.cnblogs.com/processakai/archive/2012/04/11/2442294.html 今天看书看到了关于alarm的一些用法,自己有在网上找了些资 ...

  4. Linux下利用backtrace追踪函数调用堆栈以及定位段错误【转】

    转自:https://www.linuxidc.com/Linux/2012-11/73470p2.htm 通常情况系,程序发生段错误时系统会发送SIGSEGV信号给程序,缺省处理是退出函数.我们可以 ...

  5. java中URL 的编码和解码函数

    java中URL 的编码和解码函数java.net.URLEncoder.encode(String s)和java.net.URLDecoder.decode(String s);在javascri ...

  6. robotium 中通过id获取 View 以及进行相应的操作

    robotium 中id的几种表现形式 1)字符串形式:例如id/btn_example,源码中的布局里些的hierachy 中看见的都是这种. 2)数字形式:例如0x7f0700D,打开R.java ...

  7. JPA 菜鸟教程 15 继承-一个表-SINGLE_TABLE

    原地址:http://blog.csdn.net/JE_GE/article/details/53678422 继承映射策略 一个类继承结构一个表的策略,最终只生成一个表,这是继承映射的默认策略. 举 ...

  8. 安装numpy只需一步简单的方法

    因为最近在搞机器学习,涉及到python,因为我的python版本还是windoes下的2.7版本,在学习K临近算法的时候,需要安装numpy函数,下面就把自己的安装方法写下来 1:登录网址  htt ...

  9. 嵌入式telnet的安装

    一 在已经安装telnet上,执行查询命令将查到的命令拷贝的未安装telnet的134上. [NTP-Fedora20 system]#whereis xinetd xinetd: /usr/sbin ...

  10. Python外部脚本调用Django项目Model表

    在实际生产中有时候会出现这种情况,原本运行了一个Django项目,后面又需要一些外部脚本进行辅助,而这些脚本又不希望集成到项目当中,但是又需要用到Django项目的Model,这时候是无法像在项目当中 ...