详解在AngularJS的controller外部直接获取$scope
更新时间：2017年06月02日 10:23:05 作者：LaplaceDemon
本篇文章主要介绍了详解在AngularJS的controller外部直接获取$scope ，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
以前利用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");
非常好的方式。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Angular中支持SCSS的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
今天小编就为大家分享一篇angular2 组件之间通过service互相传递的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
系统的学习了一下angularjs，发现angularjs的有些思想根php的模块smarty很像，例如数据绑定，filter。如果对smarty比较熟悉的话，学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解，感兴趣的朋友一起学习吧2015-12-12
在涉及GUI程序开发的过程中，常常有模态对话框以及非模态对话框的概念。接下来通过本文给大家介绍AngularJS 模态对话框 ，感兴趣的朋友一起学习吧2016-04-04
详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用
这篇文章主要介绍了详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-08-08
这篇文章主要帮助大家学习使用AngularJS文件上传控件angular-file-upload，感兴趣的小伙伴们可以参考一下2016-02-02
这篇文章主要介绍了Angular如何由模板生成DOM树的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要介绍了AngularJS实现页面跳转后自动弹出对话框实例代码，然后在文章下面给大家介绍了angularjs页面加载后自动弹窗的实例代码，感兴趣的朋友参考下吧2017-08-08
这篇文章主要介绍了AngularJS实现给动态生成的元素绑定事件的方法,结合实例形式分析了AngularJS动态生成元素与事件绑定相关操作技巧,需要的朋友可以参考下2016-12-12
由于最近的一个项目使用的是angularjs1.0的版本，涉及到分页查询数据的功能，后来自己就用自定义指令实现了该功能，下面小编把实例demo分享到脚本之家平台，需要的朋友参考下2017-09-09
最新评论