ZH奶酪:JavaScript调用AngularJS的函数/$scope/变量
使用背景:
需要在其他JavaScript文件中调用AngularJS内部方法或改变$scope变量,同时还要保持双向数据绑定;
首先获取AngularJS application:
方法一:通过controller来获取app
var appElement = document.querySelector('[ng-controller=mainController]');
然后在获取$scope变量:
var $scope = angular.element(appElement).scope();
如果改变了其中的变量之后,需要在页面表现出来,还需要调用apply()方法:
$scope.$apply();
方法二:通过DOM操作获取app
//通过DOM操作获取app对象
var element = angular.element($document.getElementById("app"));
//得到app对象,可以获取app的controller
var controller = element.controller();
//得到app对象,可以获取app的$scope
var scope = element.scope();
//调用$scope中的方法
scope.sub1();
//调用方法后,可以重新绑定,在页面同步(可选)
scope.$apply();
//调用字段
scope.field1;
几个相关函数:
获取当前元素的$socpe: angular.element(domElement).scope() to get the current scope for the element
获取当前app的injector: angular.element(domElement).injector() to get the current app injector
获取当前元素的controller:angular.element(domElement).controller() to get a hold of the ng-controller instance.
参考文章:
http://segmentfault.com/a/1190000000747708
http://longqiang.name/2014/12/13/%E5%A4%96%E9%83%A8js%E8%B0%83%E7%94%A8angularjs%E5%86%85%E9%83%A8%E6%96%B9%E6%B3%95/
ZH奶酪:JavaScript调用AngularJS的函数/$scope/变量的更多相关文章
- 从javascript 调用angular的函数
从vanilla javascript 调用angular的函数: * 调用 service中的函数var yourService = angular.element(document.body).i ...
- ZH奶酪:ionic+angularJS+cordova(FileTransfer)上传图片【移动端】
[功能介绍] 在开发应用的时候,经常会遇到需要上传图片的功能,比如修改个人资料的头像.本文介绍的是基于ionic框架,在移动端上传图片的功能. [功能流程] (1)点击页面上的头像,弹出一个对话框,选 ...
- AngularJS中监视Scope变量以及外部调用Scope方法
在AngularJS中,有时候需要监视Scope中的某个变量,因为变量的改变会影响一些界面元素的显示.有时,也希望通过jQuery调用Scope的某个方法. 比如以下场景: <div> & ...
- JavaScript文件中调用AngularJS内部方法或改变$scope变量
需要在其他JavaScript文件中调用AngularJS内部方法或改变$scope变量,同时还要保持双向数据绑定: 首先获取AngularJS application: 方法一:通过controll ...
- Android中Webview使用javascript调用事先定义好的Java函数
1. 首先定义好一个类,专们用于给javascript调用 public class JavaScriptInterface { // share your news public void shar ...
- 一款优秀的JavaScript框架—AngularJS
AngularJS简介 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angular ...
- AngularJs学习笔记--Scope
原版地址:http://code.angularjs.org/1.0.2/docs/guide/scope 一.什么是Scope? scope(http://code.angularjs.org/1. ...
- AngularJS 深入理解 $scope 转载▼
AngularJS 深入理解 $scope 转载▼ (2015-04-07 14:09:50) $scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达 ...
- javascript面向对象一:函数
Arguments对象 <script type="text/javascript"> /* Arguments对象: * 在Java中存在函数的重载现象. * 节省了 ...
随机推荐
- C 语言与动态库相关基础知识
1.导入文件<>和“”的区别 #include <xxx.h>导入的是标准目录下的.h文件,所谓的标准目录指的是:/use/local/include(一般是第三方头文件)以及 ...
- 已知大小分别为m、n的两个无序数组A、B和一个常数c,求满足A[i]+B[j]=c的所有A[i]和B[j]
方法一:枚举法.该方法是最容易.也是最简单的方法,枚举出数组A和数组B中所有的元素对,判断其和是否为c,如果是,则输出. 方法二:排序+二分查找法.首先,对两个数组中长度较大数组,不妨设为A,排序:然 ...
- PostgreSQL逻辑复制之slony篇
Slony是PostgreSQL领域中最广泛的复制解决方案之一.它不仅是最古老的复制实现之一,它也是一个拥有最广泛的外部工具支持的工具,比如pgAdmin3.多年来,Slony是在PostgreSQL ...
- g++参数介绍
转自http://www.cnblogs.com/lidan/archive/2011/05/25/2239517.html [介绍] gcc and g++分别是gnu的c & c++编译器 ...
- HashTable、HashMap、ConcurrentHashMap、Collections.synchronizedMap()区别
Collections.synchronizedMap()和Hashtable一样,实现上在调用map所有方法时,都对整个map进行同步,而ConcurrentHashMap的实现却更加精细,它对Ha ...
- angular-file-upload+struts的使用
参考帖子 http://www.cnblogs.com/wangzun/p/6099884.html http://www.cnblogs.com/highriver/archive/2011/06/ ...
- web_qianduan
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"& ...
- c# linq update单个字段
1.更新单个字段 /// <summary> /// 更新字段 /// </summary> /// <typeparam name="T">& ...
- 一种新型聚类算法(Clustering by fast search and find of density peaksd)
最近在学习论文的时候发现了在science上发表的关于新型的基于密度的聚类算法 Kmean算法有很多不足的地方,比如k值的确定,初始结点选择,而且还不能检测费球面类别的数据分布,对于第二个问题,提出了 ...
- Android设计和开发系列第二篇:Navigation Drawer(Design)
Navigation Drawer Creating a Navigation Drawer The navigation drawer is a panel that transitions in ...