详解在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 相关文章推荐
js下用gb2312编码解码实现方法
Dec 31 Javascript
jQuery 前的按键判断代码
Mar 19 Javascript
js改变文章字体大小的实例代码
Nov 27 Javascript
js 限制input只能输入数字、字母和汉字等等
Dec 18 Javascript
js获取select选中的option的text示例代码
Dec 19 Javascript
jQuery页面加载初始化常用的三种方法
Jun 04 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
Vue实现table上下移动功能示例
Feb 21 Javascript
ES10 特性的完整指南小结
Mar 04 Javascript
vuex存储token示例
Nov 11 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 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
打造计数器DIY三步曲(上)
2006/10/09 PHP
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
js事件触发操作实例分析
2019/06/21 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
Python性能优化技巧
2015/03/09 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
JAVA软件工程师测试题
2014/07/25 面试题
上班看电影检讨书
2014/02/12 职场文书
保安队长职务说明书
2014/02/23 职场文书
《观舞记》教学反思
2014/04/16 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python