关于angularjs中的jQuery
关于angularjs中的jQuery
下面是一个小例子,用来说明我经常看到的一种模式。我们需要一个开关型的按钮。(注意:这个例子的代码有点装逼,并且有点冗长,只是为了用来代表更加复杂一些的例子,这些例子通常是以与此相同的方式来解决的。)
.directive( 'myDirective', function () {
return {
template: '<a class="btn">Toggle me!</a>',
link: function ( scope, element, attrs ) {
var on = false;
$(element).click( function () {
if ( on ) {
$(element).removeClass( 'active' );
}
else {
$(element).addClass( 'active' );
}
on = !on;
});
}
};
});
这段代码里面有很多错误的地方。
第一,jQuery从来就不是必须的。我们这里要实现的东西实际上完全不需要jQuery!
第二,即使我们已经在页面上引入了jQuery,也没有必要在这里去使用;对于没有使用jQuery的项目,我们可以简单地使用angular.element,这样一来我们的组件同样能够很好地运行。
第三,假设这里必须使用jQuery我们的指令才能运行,jqLite(angular.element)总是会自动使用jQuery,如果jQuery已经加载了话!所以我们不需要使用$,我们只要使用angular.element就可以了。
第四,与第三点类似,jqLite元素没有必要使用$来进行包装,传递给link函数的element已经是一个jQuery元素了!
还有第五点,这一点我们在前面的小节中没有提到,那就是我们为什么要把模板相关的内容混合在我们的代码逻辑里面?
以上指令可以重写成下面这样(即使对于非常复杂的情况同样可以改写!),改写之后代码极其简单:
.directive( 'myDirective', function () {
return {
scope: true,
template: '<a class="btn" ng-class="{active: on}" ng-click="toggle()">Toggle me!</a>',
link: function ( scope, element, attrs ) {
scope.on = false;
scope.toggle = function () {
scope.on = !$scope.on;
};
}
};
});
Reference:
https://my.oschina.net/mumu/blog/325284
关于angularjs中的jQuery的更多相关文章
- (网页)angularJs中怎么模拟jQuery中的this?(转)
转载自mini_fan博客园: 今天想在Angular项目中使用jQuery的this功能,发现undefined.代码如下: HTML部分: <p ng-click="testCli ...
- angularJs中怎么模拟jQuery中的this?
最近自己正在学习angularJs,在学到ng-click时,由于想获取当前点击元素的自身,开始想到了用$index来获取当前元素的索引同样能实现我想要的效果,但是在有些特殊的情况下,使用$index ...
- AngularJS 中的Promise --- $q服务详解
先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...
- 在AngularJS中的使用Highcharts图表控件
一.Highcharts简介 Highcharts是一款非常好用的前端图表控件,正如其中文网介绍的那样:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 如果你的项目是基于jquer ...
- AngularJS中的指令全面解析(转载)
说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...
- AngularJS中的指令
欢迎大家讨论与指导 : ) 前言 当AngularJS中的内置指令不能满足我们的需求,或者当我们需要创建一个能够用于多个AngularJS程序的自包含的功能单元时,我们应该创建自定义指令来满足需求. ...
- Angularjs中的promise
promise 是一种用异步方式处理值的方法,promise是对象,代表了一个函数最终可能的返回值或抛出的异常.在与远程对象打交道非常有用,可以把它们看成一个远程对象的代理. 要在Angular中创建 ...
- AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5
前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step- #切换分支 npm start ...
- AngularJS 中的 Promise 和 设计模式(转)
原文地址:http://my.oschina.net/ilivebox/blog/293771 目录[-] Promise 简单例子 链式 Promise Parallel Promises And ...
随机推荐
- gulp之压缩合并MD5清空替换加前缀以及自动编译自动刷新浏览器大全
gulp是基于流的前端构件化工具.目前比较火的前端构建化工具还是挺多的,grunt gulp fis3等等. 这个鬼东西有什么用?请参考https://www.zhihu.com/question/3 ...
- phoneGap蓝牙设备链接打印操作插件
前台 bluetooth.js /*Copyright 2013 101.key Licensed under the Apache License, Version 2.0 (the " ...
- asp.net,cookie,写cookie,取cookie
Cookie是一段文本信息,在客户端存储 Cookie 是 ASP.NET 的会话状态将请求与会话关联的方法之一.Cookie 也可以直接用于在请求之间保持数据,但数据随后将存储在客户端并随每个请求一 ...
- 初探javascript
javascript是一种在网络广泛应用的脚本语言,虽然名字与java相近,但其实两者并没有直接的关系,脚本语言是一种为了便于操作和拓展功能而开发出来的解释性语言,不同于传统的编程语言,脚本语言不需要 ...
- CF-补题1
CF-补题1 1.CodeForces 735C 题意:n个人淘汰赛,两个人可以比赛的条件是:两人打过的场数之差绝对值<2.求冠军最多可以打多少场. 总结:看了题解,转换一下思路.求n个 ...
- 反编译apk时遇到的问题
第一次尝试反编译的时候遇到如下问题:Input file (ganzhou) was not found or was not readable 百度之后说是apktool版本2.0以上,编译命令变了 ...
- uploadify批量上传
js: $("#uploadify").uploadify({ 'uploader':'uploadServlet', 'swf':'image/uploadify.swf', ' ...
- JAVA基础整理-集合篇(一)
集合作为JAVA的基础知识,本来感觉自己理解的很清楚了,但是在最近的一次面试中还是答得不尽如人意!再次做一下整理,以便加深理解以及随时查阅. 首先,java.util包中三个重要的接口及特点:List ...
- PHP DOS漏洞的新利用:CVE-2015-4024 Reviewed
1. 背景介绍 今天我们想从2015.04.03的一个PHP远程dos漏洞(CVE-2015-4024)说起.技术细节见如下链接,https://bugs.php.net/bug.php?id ...
- [转]html5表单上传控件Files API
表单上传控件:<input type="file" />(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允许选择多个文件:< ...