详解在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 框架使用教程 AJAX篇
Oct 11 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 Javascript
关于跨站脚本攻击问题
Dec 22 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
Ajax实现不刷新取最新商品
Mar 01 Javascript
详解Angular.js中$http拦截器的介绍及使用
Jul 04 Javascript
iView-admin 动态路由问题的解决方法
Oct 03 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 Javascript
elementui实现预览图片组件二次封装
Dec 29 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长字符串定义方法
2012/07/12 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
Javascript Math对象
2009/08/13 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
jquery遍历checkbox介绍
2014/02/21 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
javascript中this的四种用法
2015/05/11 Javascript
利用node.js实现自动生成前端项目组件的方法详解
2017/07/12 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
python 判断自定义对象类型
2009/03/21 Python
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
Python numpy生成矩阵、串联矩阵代码分享
2017/12/04 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
会计毕业生自荐信
2013/11/21 职场文书
综合实践活动方案
2014/02/14 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python