使用背景:

需要在其他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. less语法(一)变量与extend

    摘要: 作为 CSS 的一种扩展,Less 不仅完全兼容 CSS 语法,而且连新增的特性也是使用 CSS 语法.这样的设计使得学习 Less 很轻松,而且你可以在任何时候回退到 CSS.less文件是 ...

  2. SpringBoot------集成MyBatis

    1.pom.xml文件添加MyBatis和MySQL等依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns: ...

  3. MySQL------报错Access denied for user 'root'@'localhost' (using password:NO)解决方法

    报错:Access denied for user 'root'@'localhost' (using password:NO) 原因:没有给用户“root'@'localhost”赋予数据库权限 解 ...

  4. JAXB XML到java object的转换

    JAXB是Java Architecture for XML Binding的缩写.使用JAXB注解将Java对象转换成XML文件.在这篇教程中,我们将会展示如何使用JAXB来做以下事情: 1. ma ...

  5. UITextField中文输入法输入时对字符长度的限制 输入时对字符类型的限制

    检索一个字符串的长度的话:直接用 length,去进行判断就行了, 如果要检索字符串是否是自己要限制的类型的话,可以用正则表达式: 举个例子:   匹配9-15个由字母/数字组成的字符串的正则表达式: ...

  6. weblogic12C出现“java.lang.ArrayIndexOutOfBoundsException: 48188”

    最近将10G的一个项目转移到12C出现数组越界的问题: 解决办法:  jaxen-1.1.1.jarxom-1.0.jaricu4j-2.6.1.jar  把项目中这三个jar包删除后就可以正常部署了 ...

  7. MFC框架程序解析

    MFC的 程序框架: WinMain函数:程序首先到达全局变量theApp,再到达theAPP的构造函数,最后到达WinMain函数处. 问:为何要定义一个全局对象theAPP,让其在WinMain函 ...

  8. “std”: 具有该名称的命名空间不存在

    当只用using namesp std 时,会报 error C2871: “std”: 具有该名称的命名空间不存在. 包含一个含有std的头文件就不会报错了,比如<iostream>.& ...

  9. Web程序员应该知道的Javascript prototype原理

    有同事问了我几个和Javascript的类继承的小问题,我在也不太理解的情况下,胡诌了一通. 回来以后有些内疚, 反省一下, 整理整理Javascript的prototype的原理, 自己清楚点, 也 ...

  10. linux查看Raid磁盘阵列信息

    软件raid:只能通过Linux系统本身来查看 cat /proc/mdstat 可以看到raid级别,状态等信息. 硬件raid: 最佳的办法是通过已安装的raid厂商的管理工具来查看,有cmdli ...