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中存在函数的重载现象. * 节省了 ...
随机推荐
- ASCII码与16进制的互相转换(表)
所谓的ASCII和16进制都只是概念上的东西,在计算机中通通是二进制 转换应该是输出的转换,同样是一个数,在计算机内存中表示是一样的,只是输出不一样ASCII是针对字符的编码,几乎是键盘上的字符的编码 ...
- GDAL------加载Shapefile文件
代码: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syst ...
- ios开发之--armv7,armv7s,arm64,i386,x86_64详解
有时候在运行的时候,经常出现诸如i386的错误,最新一些可能会出现 No architectures to compile for (ONLY_ACTIVE_ARCH=YES, active arch ...
- Python学习笔记(15)- os\os.path 操作文件
程序1 编写一个程序,统计当前目录下每个文件类型的文件数,程序实现如图: import os def countfile(path): dict1 = {} # 定义一个字典 all_files = ...
- 转载用sql语句计算出mysql数据库的qps,tps,iops性能指标
本帖最后由 LUK 于 2014-9-21 22:39 编辑 思路: 1 关注MYSQL三个方面的性能指标,分别为query数,transaction数,io请求数 2 在某个时间范围内(例如20秒) ...
- 如何关闭Struts2的webconsole.html
出于安全目的,在禁用了devMode之后,仍然不希望其他人员看到webconsole.html页面,则可以直接删除webconsole.html 的源文件, 它的位置存在于: 我们手工删除 strut ...
- oracle URL参数获取
改函数主要是从URL中获取参数例如 sssss.html?cur=aaa&ref=cccc 调用方式:f_querystr(url,'cur','&'); CREATE OR REPL ...
- 《转载》Fiddler 抓包工具总结
阅读目录 1. Fiddler 抓包简介 1). 字段说明 2). Statistics 请求的性能数据分析 3). Inspectors 查看数据内容 4). AutoResponder 允许拦截制 ...
- Google Analytics访问空白的解决方法
在C:\Windows \System32 \drivers \etc下用记事本打开hosts文档 添加: 74.125.129.112 adwords.google.com 74.125.31.12 ...
- 【Phalapi2.0】 如何使用 source 通过 header 传参数
做接口服务时候.有些场景会使用header 来传递参数. 查看官网文档说明 数据来源 source指定当前单个参数的数据来源,可以是post.get.cookie.server.request.hea ...