详解在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 相关文章推荐
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
js 验证密码强弱的小例子
Mar 21 Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
May 19 Javascript
js实现正则匹配中文标点符号的方法
Dec 23 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
Mar 09 Javascript
Vue源码解析之Template转化为AST的实现方法
Dec 14 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(5) 类和对象
2010/02/16 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
解析php类的注册与自动加载
2013/07/05 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
探究Python中isalnum()方法的使用
2015/05/18 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
一份python入门应该看的学习资料
2018/04/11 Python
对python中的pop函数和append函数详解
2018/05/04 Python
Python简易版图书管理系统
2019/08/12 Python
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
英国知名小木屋定制网站:Tiger Sheds
2020/03/06 全球购物
机电专业体育教师求职信
2013/09/21 职场文书
获奖的大学生创业计划书
2014/01/05 职场文书
幼儿园开学寄语
2014/04/03 职场文书
合作经营协议书
2014/04/17 职场文书
生产助理岗位职责
2014/06/18 职场文书
数学教师个人工作总结
2015/02/06 职场文书
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL