详解在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 相关文章推荐
RGB颜色值转HTML十六进制(HEX)代码的JS函数
Apr 25 Javascript
js textarea自动增高并隐藏滚动条
Dec 16 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
Jan 19 Javascript
tuzhu_req.js 实现仿百度图片首页效果
Aug 11 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
May 18 Javascript
如何用JavaScript实现动态修改CSS样式表
May 20 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
如何从零开始手写Koa2框架
Mar 22 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
Vue 技巧之控制父类的 slot
Feb 24 Javascript
vue element-ui中table合计指定列求和实例
Nov 02 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 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函数microtime()用法与说明
2013/12/04 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
python实现批量按比例缩放图片效果
2018/03/30 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
python操作redis数据库的三种方法
2020/09/10 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
环保项目建议书
2014/08/26 职场文书
会议开幕词
2015/01/28 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android