详解在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 相关文章推荐
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
Dec 22 Javascript
JavaScript 设计模式学习 Singleton
Jul 27 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
快速使用node.js进行web开发详解
Apr 26 Javascript
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
VUE动态生成word的实现
Jul 26 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面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
php保存信息到当前Session的方法
2015/03/16 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
JS实现简单打字测试
2020/06/24 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
python正则表达式match和search用法实例
2015/03/26 Python
Python下Fabric的简单部署方法
2015/07/14 Python
Python实现自动登录百度空间的方法
2017/06/10 Python
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
Python中循环引用(import)失败的解决方法
2018/04/22 Python
实例讲解Python爬取网页数据
2018/07/08 Python
python绘制中国大陆人口热力图
2018/11/07 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
logging level级别介绍
2020/02/21 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
新闻学毕业生自荐信
2013/11/15 职场文书
幼儿园教师奖惩制度
2014/02/01 职场文书
公司年会主持词
2014/03/22 职场文书
中国梦读书活动总结
2014/07/10 职场文书
2014年导购员工作总结
2014/11/18 职场文书
故宫导游词
2015/01/31 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技