详解在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 相关文章推荐
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
jQuery创建插件的代码分析
Apr 14 Javascript
jQuery仿Excel表格编辑功能的实现代码
May 01 Javascript
js浮动图片的动态效果
Jul 10 Javascript
javascript中offset、client、scroll的属性总结
Aug 13 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
Jul 30 Javascript
vue中keep-alive,include的缓存问题
Nov 26 Javascript
Vue.js中的高级面试题及答案
Jan 13 Javascript
JavaScript中跨域问题的深入理解
Mar 04 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 图片上传代码
2011/09/13 PHP
通达OA公共代码 php常用检测函数
2011/12/14 PHP
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
javascript工具库代码
2012/03/29 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
JavaScript实现计数器基础方法
2017/10/10 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
django使用图片延时加载引起后台404错误
2017/04/18 Python
python线程池threadpool使用篇
2018/04/27 Python
python re模块的高级用法详解
2018/06/06 Python
python 把列表转化为字符串的方法
2018/10/23 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
python的flask框架难学吗
2020/07/31 Python
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
经济信息管理专业大学生求职信
2013/09/27 职场文书
校领导推荐信
2013/11/01 职场文书
护士的自我鉴定
2014/02/07 职场文书
安全环保演讲稿
2014/08/28 职场文书
python中的random模块和相关函数详解
2022/04/22 Python