详解在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无缝滚动代码
Jan 03 Javascript
javascript onmouseout 解决办法
Jul 17 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
js抽奖实现随机抽奖代码效果
Dec 02 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
angular实现IM聊天图片发送实例
May 08 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
微信小程序定位当前城市的方法
Jul 19 Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 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 存储文本换行实现方法
2010/01/05 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
微信公众号之主动给用户发送消息功能
2019/06/22 PHP
基于PHP的登录和注册的功能的实现
2020/08/06 PHP
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
javascript 多浏览器 事件大全
2010/03/23 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
python基础教程之udp端口扫描
2014/02/10 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
深入浅析Python传值与传址
2018/07/10 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
python同时替换多个字符串方法示例
2019/09/17 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
香港零食网购:上仓胃子
2020/06/08 全球购物
Windows和Linux动态库应用异同
2016/07/28 面试题
校长岗位职责
2013/11/26 职场文书
应届专科生个人的自我评价
2014/01/05 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
批评与自我批评总结
2014/10/17 职场文书
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
餐馆开业致辞
2015/08/01 职场文书
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技