使用背景:

需要在其他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/变量的更多相关文章

  1. 从javascript 调用angular的函数

    从vanilla javascript 调用angular的函数: * 调用 service中的函数var yourService = angular.element(document.body).i ...

  2. ZH奶酪:ionic+angularJS+cordova(FileTransfer)上传图片【移动端】

    [功能介绍] 在开发应用的时候,经常会遇到需要上传图片的功能,比如修改个人资料的头像.本文介绍的是基于ionic框架,在移动端上传图片的功能. [功能流程] (1)点击页面上的头像,弹出一个对话框,选 ...

  3. AngularJS中监视Scope变量以及外部调用Scope方法

    在AngularJS中,有时候需要监视Scope中的某个变量,因为变量的改变会影响一些界面元素的显示.有时,也希望通过jQuery调用Scope的某个方法. 比如以下场景: <div> & ...

  4. JavaScript文件中调用AngularJS内部方法或改变$scope变量

    需要在其他JavaScript文件中调用AngularJS内部方法或改变$scope变量,同时还要保持双向数据绑定: 首先获取AngularJS application: 方法一:通过controll ...

  5. Android中Webview使用javascript调用事先定义好的Java函数

    1. 首先定义好一个类,专们用于给javascript调用 public class JavaScriptInterface { // share your news public void shar ...

  6. 一款优秀的JavaScript框架—AngularJS

    AngularJS简介 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angular ...

  7. AngularJs学习笔记--Scope

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/scope 一.什么是Scope? scope(http://code.angularjs.org/1. ...

  8. AngularJS 深入理解 $scope 转载▼

    AngularJS 深入理解 $scope 转载▼ (2015-04-07 14:09:50)     $scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达 ...

  9. javascript面向对象一:函数

    Arguments对象 <script type="text/javascript"> /* Arguments对象: * 在Java中存在函数的重载现象. * 节省了 ...

随机推荐

  1. 开发kendo-ui弹窗组件

    摘要: kendo-ui中只是提供了windwo插件,并没有提供页内弹窗插件.现在分享项目中自己定制的基于window组件的弹窗插件,如果你的项目也是用的kendo-ui,只需要将组件代码引到项目中即 ...

  2. 标准JSON格式定义与解析注意点

    标准JSON格式定义与解析注意点 在JS.IOS.Android中都内置了JSON的序列化.反序列化SDK.JEE中也可以使用第三方的JSON解析库,如GSON.虽然在JSON格式被定义出来的时候并没 ...

  3. SpringMVC由浅入深day01_7入门程序小结

    7 入门程序小结 通过入门程序理解springmvc前端控制器.处理器映射器.处理器适配器.视图解析器用法. 前端控制器配置: 处理器映射器: 非注解处理器映射器(了解) 注解的处理器映射器(掌握) ...

  4. 修改Tomcat的默认访问目录

    放在外网的应用,用户多是直接输入域名访问,而Tomcat的默认目录是ROOT,所以我们需要更改其默认目录. 更改Tomcat的默认目录很简单,只需要修改server.xml就可以了. 具体是是在< ...

  5. 5 -- Hibernate的基本用法 --4 1 创建Configuration对象

    org.hibernate.cfg.Configuration实例代表了应用程序到SQL数据库的配置信息,Configuration对象提供了一个buildSessionFactory()方法,该方法 ...

  6. 8 -- 深入使用Spring -- 1...4 属性占位符配置器

    8.1.4 属性占位符配置器 PropertyPlaceholderConfigurer 是一个容器后处理器,负责读取Properties属性文件里的属性值,并将这些属性值设置成Spring配置文件的 ...

  7. centos 上不了网了

    昨天还用的好好的,今天就上不了网了,郁闷,不过,正好是一次学习linux网络配置的好机会,这会已经把它折腾好了,此文就是在linux下面的浏览器中写的! 先检查一下虚拟机中的网络设置是否正常,由于我的 ...

  8. springJdbc in 查询,Spring namedParameterJdbcTemplate in查询

    springJdbc in 查询,Spring namedParameterJdbcTemplate in查询, SpringJdbc命名参数in查询,namedParameterJdbcTempla ...

  9. Struts2开发模式漏洞

    当Struts2中的devMode模式设置为true时,存在严重远程代码执行漏洞.如果WEB服务以最高权限运行时,可远程执行任意命令,包括远程控制服务器. 如果为受影响的版本,建议修改配置文件stru ...

  10. IIS URL Rewrite Module的防盗链规则设置

    IIS版本:IIS 7.5 URL Rewrite组件:IIS URL Rewrite Module(http://www.iis.net/downloads/microsoft/url-rewrit ...