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并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆 ...
随机推荐
- Opencv学习笔记——release和debug两个模式的运行问题
本文为原创作品,转载请注明出处 欢迎关注我的博客:http://blog.csdn.net/hit2015spring和http://www.cnblogs.com/xujianqing/ 作者:晨凫 ...
- centos7.2环境yum方式快速搭建lnmp环境nginx+mariadb+php-fpm
centos7.2环境yum方式安装nginx+mariadb+php-fpm 1.安装lnmp环境 安装epel源 yum install -y epel-release 安装 MySQL + PH ...
- Selenium WebDriver如何模拟复制和粘贴
以最简单的例子来说明,我们需要在bing搜索引擎中,输入并查询“Selenium自动化测试”几个字.可以很快就写出如下代码: String queryString = "Selenium自动 ...
- Promise初探
在JavaScript的世界中,所有代码都是单线程执行的. 由于这个“缺陷”,导致JavaScript的所有网络操作,浏览器事件,都必须是异步执行.异步执行可以用回调函数实现: function ru ...
- 【Unity_UWP】Unity 工程发布win10 UWP 时的本地文件读取 (上篇)
Universal Windows Platform(UWP)是微软Windows10专用的通用应用平台,其目的在于在统一操作系统下控制所有智能电子设备. 自从Unity 5.2之后,配合VS 201 ...
- css实现导航切换
css实现导航切换 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <title>css实现导航切换&l ...
- hdu 2065(泰勒展式)
比赛的时候遇到这种题,只能怪自己高数学得不好,看着别人秒.... 由4种字母组成,A和C只能出现偶数次. 构造指数级生成函数:(1+x/1!+x^2/2!+x^3/3!……)^2*(1+x^2/2!+ ...
- Java 抽象类和抽象方法
包含抽象方法的类叫抽象类,如果一个类中包含一个或多个抽象方法,该类必须被限定为抽象的,否则编译器会报错,抽象类不可创建对象,创建抽象类的对象编译器会报错 如果从一个抽象类继承,并想创建该新类的对象,那 ...
- 删除MySQL binlog日志的方法
对于比较繁忙的OLTP(在线事务处理)系统,由于每天生成日志量大,这些日志如果长时间不清除,将会对磁盘空间带来很大的浪费.因此,定期删除日志是DBA维护MySQL数据库的一个重要工作内容.下面跟大家分 ...
- CI框架中集成CKEditor编辑器的教程
CKEditor是在很多开发过程中都会用到的一个富文本编辑器,那么如何在CI框架中使用它呢?这里介绍了在CI下使用CKEditor的方法,版本比较低,是在CI 1.7.3下使用fckeditor 2. ...