在AngularJS的controller外部直接获取$scope
为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处。LaplaceDemon/SJQ。
http://www.cnblogs.com/shijiaqi1066/p/5560843.html
以前利用webqq的写过一个自动发消息的脚本,由于那时webqq还直接使用类似jQuery操作DOM的技术,所以脚本很简单就可以实现。
现如今很多web应用都开始使用AngularJS,MVVM导致的就是无法操作dom而去直接改变数据。所以面对网页版微信,要实现一个自动发送的脚本,就无法再用以前那套DOM的思路了。
要修改AngularJS中的数据,首先就要获取scope。其实获取scope的方法很简单。
由于大部分Angular项目需要使用jQuery作为补充。可以在jQuery中通过.scope()方法获取当前选择器内容里继承的域。
即类似这样的方式:
$('div[ng-controller="listController"]').scope();
例:完整的例子。
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Get angular's scope in jQuery</title>
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.4.3/angular.js"></script>
<script>
angular.module('app',[])
.controller('listController',['$scope', function ($scope) {
$scope.list = [1,2,3,4,5];
$scope.test = function () {
console.log('test');
}
}])
</script>
<script>
$(document).on('ready', function () {
var controllerScope = $('div[ng-controller="listController"]').scope(); // Get controller's scope
controllerScope.test(); // log 'test'
console.log(controllerScope.list); // log [1,2,3,4,5]
$('button').click(function (e) {
var scope = $(e.target).scope();
console.log(scope.item) // log item number
scope.test(); // log 'test'
})
})
</script>
</head>
<body>
<div ng-controller="listController">
<ul>
<li ng-repeat="item in list"><button>Select {{item}}</button></li>
</ul>
</div>
</body>
</html>
那么打开网页版微信的页面(2016-06-05)选中你需要发消息的人。然后执行如下脚本:
var controllerScope = $('div[ng-controller="chatSenderController"]').scope(); // 获取chatSenderController的$scope
controllerScope.editAreaCtn = "星哥,下午好"; // 设置需要发送的消息。即设置$scope某个属性的值。
// 触发“发送按钮”的点击事件。
$(".action a").trigger("click");
非常好的“外挂方式”。
为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处。LaplaceDemon/SJQ。
http://www.cnblogs.com/shijiaqi1066/p/5560843.html
在AngularJS的controller外部直接获取$scope的更多相关文章
- AngularJS入门心得4——漫谈指令scope
上篇<AngularJS入门心得3——HTML的左右手指令>初步介绍了指令的概念和作用.已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与 ...
- AngularJS 中 Controller 之间的通信
用 Angular 进行开发,基本上都会遇到 Controller 之间通信的问题,本文对此进行一个总结. 在 Angular 中,Controller 之间通信的方式主要有三种: 1)作用域继承.利 ...
- angularjs 的controller的三种写法
AngularJS 的controller其实就是一个方法,它有三种写法: 第一种: <pre name="code" class="javascript" ...
- Angularjs中controller的三种写法
在Angular中,Directive.Service.Filter.Controller都是以工厂方法的方式给出,而工厂方法的参数名对应着该工厂方法依赖的Service.angularjs中cont ...
- angularJS中controller的通信
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- AngularJS-01.AngularJS,Module,Controller,scope
1.AngularJS 一个构建动态Web应用程序的结构化框架. 基于JavaScript的MVC框架.( MVC ---- Model(模型).View(视图).Controller(控制器) ) ...
- angular controller as syntax vs scope
今天要和大家分享的是angular从1.2版本开始带来了新语法Controller as.再次之前我们对于angular在view上的绑定都必须使用直接的scope对象,对于controller来说我 ...
- Angularjs之controller 和filter(四)
Controller组件(http://www.angularjs.cn/A00C) 在AngularJS中,控制器是一个Javascript函数(类型/类),用来增强除了根作用域以外的作用域实例的. ...
- angularJS的controller之间如何正确的通信
AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在创建新的控制器时,angularJ ...
随机推荐
- hdu1838Chessboard(DP)
http://acm.hdu.edu.cn/showproblem.php?pid=1838 其实原先不知道这题是DP 我都想不到DP去 想了想没思路 看了下题解 经典思路 :第n大的都是由第n-1大 ...
- MapReduce的数据流程、执行流程
MapReduce的数据流程: 预先加载本地的输入文件 经过MAP处理产生中间结果 经过shuffle程序将相同key的中间结果分发到同一节点上处理 Recude处理产生结果输出 将结果输出保存在hd ...
- sql 不同server間寫入數據
select * from sys.servers sp_dropserver @server =N'' sp_dropserver '' ,'droplogins' EXEC master.dbo. ...
- BZOJ_1625_ [Usaco2007_Dec]_宝石手镯_(01背包)
描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1625 01背包裸题. p.s.随便点开一道就是水题... 分析 ... #include &l ...
- JVM内存模型及内存分配过程
一.JVM内存模型 JVM主要管理两种类型内存:堆(Heap)和非堆(Permanent区域). 1.Heap是运行时数据区域,所有类实例和数组的内存均从此处分配.Heap区分两大块,一块是 Youn ...
- BrnShop开源网上商城第五讲:自定义视图引擎
今天这篇博文主要讲解自定义视图引擎,大家都知道在asp.net mvc框架中默认自带一个Razor视图引擎,除此之外我们也可以自定义自己的视图引擎,只需要实现IViewEngine接口,接口定义如下: ...
- 使用Bugfree不应有的坏习惯
Bugfree是一款优秀的bug管理和追踪工具,因此受到不少公司的青睐.但实际的工作中,我发现不少开发或是测试的同事有一些不好的使用习惯,使得我们对Bugfree的利用不够高效.我下面列出使用Bugf ...
- Android PagerAdapter
本基类是ViewPager提供填充页面内容的适配器(数据与显示内容之间桥梁).通常,人们不是直接使用本基类的,而是使用这个基类的实现:FragmentPagerAdapter 或者Fragment ...
- ashx文件结合ajax使用(返回json数据)
ashx文件返回json数据: public void ProcessRequest(HttpContext context) { context.Response.ContentType = &qu ...
- Visual Studio 2010打开水晶报表是出现二进制
水晶报表在64位的机器下未安装成功 解决方法 到http://www.cnblogs.com/siyunianhua/p/4806513.html下载 水晶报表VS2010版IDE安装标准版SAP ...