详解在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插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
js实现select二级联动下拉菜单
Apr 17 Javascript
详解Bootstrap插件
Apr 25 Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 Javascript
详解js中Array的方法及技巧
Sep 12 Javascript
使用uni-app开发微信小程序的实现
Dec 13 Javascript
jQuery treeview树形结构应用
Mar 24 jQuery
详解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实现无限级分类(不使用递归)
2015/10/22 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
js控制框架刷新
2008/08/01 Javascript
JavaScript的eval JSON object问题
2009/11/15 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
JavaScript使用localStorage存储数据
2019/09/25 Javascript
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
Python 中的range(),以及列表切片方法
2018/07/02 Python
对python中类的继承与方法重写介绍
2019/01/20 Python
python对常见数据类型的遍历解析
2019/08/27 Python
python入门之基础语法学习笔记
2020/02/08 Python
python实现人像动漫化的示例代码
2020/05/17 Python
python爬虫数据保存到mongoDB的实例方法
2020/07/28 Python
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
物流司机岗位职责
2013/12/28 职场文书
小学教师师德反思
2014/02/03 职场文书
运动会入场词50字
2014/02/20 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
酒店员工辞职信范文
2015/02/28 职场文书
实习指导老师意见
2015/06/04 职场文书
P站美图推荐——变身女主角特辑
2022/03/20 日漫