在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

转载于:https://www.cnblogs.com/shijiaqi1066/p/5560843.html

在AngularJS的controller外部直接获取$scope相关推荐

angularJS的controller之间如何正确的通信
AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在创建新的控制器时,angularJ ...
AngularJS控制器(Controller)
AngularJS应用主要依赖于控制器来控制数据在应用程序中的流动.控制器采用ng-controller指令定义.控制器是一个包含属性/属性和JavaScript对象的功能.每个控制器接受$scope ...
angularjs控制器controller
不要视图去复用Controller,一个控制器一般只负责一小块视图不要在Controller中操作DOM,这不是控制器的职责不要在Controller里面做数据格式化,ng有很好用的表单控件不要 ...
angularjs directive scope变化为啥html,学习AngularJs:Directive指令用法（完整版）
本教程使用AngularJs版本:1.5.3 摘要:Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR ...
AngularJS 深入理解 $scope 转载▼
AngularJS 深入理解 $scope 转载▼ (2015-04-07 14:09:50) $scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的 ...
Angularjs Controller 间通信机制
在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...
AngularJS控制器中的#39;this#39;与$ scope
本文翻译自:'this' vs $scope in AngularJS controllers In the "Create Components" section of Angu ...
[AngularJS] Reusable directive, require from parent controller
Glorious Directives for Our Navigation NoteWrangler navigation has now been broken into two parts: t ...
AngularJs中的directives（指令part1）
一.指令的职责指令的职责是修改DOM结构,并将作用域和DOM连接起来.即指令既要操作DOM,将作用域内的数据绑定到DOM节点上,又要为DOM绑定事件调用作用域内的对应的方法. 二.创建自定义指令 ...

在AngularJS的controller外部直接获取$scope

在AngularJS的controller外部直接获取$scope相关推荐

最新文章

热门文章