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


Posted in Javascript onJune 02, 2017

以前利用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");

非常好的“外挂方式”。 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用jquery ajax获取网站Alexa排名的代码
Dec 12 Javascript
初识javascript 文档碎片
Jul 13 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
Sep 28 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
JS 实现随机验证码功能
Feb 15 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
vue实现未登录跳转到登录页面的方法
Jul 17 Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 Javascript
详解Vue之计算属性
Jun 20 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 Javascript
详解angularJs中关于ng-class的三种使用方式说明
Jun 02 #Javascript
vue.js删除动态绑定的radio的指定项
Jun 02 #Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 #Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 #jQuery
Vue.js中数据绑定的语法教程
Jun 02 #Javascript
SpringMVC+bootstrap table实例详解
Jun 02 #Javascript
BootStrap daterangepicker 双日历控件
Jun 02 #Javascript
You might like
用PHP和ACCESS写聊天室(十)
2006/10/09 PHP
分享PHP header函数使用教程
2013/09/05 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
jquery简单体验
2007/01/10 Javascript
javascript parseInt 大改造
2009/09/27 Javascript
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
Javascript中的delete介绍
2012/09/02 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
复习Python中的字符串知识点
2015/04/14 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
flask入门之表单的实现
2018/07/18 Python
Python 读写文件的操作代码
2018/09/20 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
自我鉴定总结
2014/03/24 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
作文批改评语
2014/12/25 职场文书
给老师的感谢信
2015/01/20 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang
python百行代码实现汉服圈图片爬取
2021/11/23 Python