JavaScript调用AngularJS的函数/$scope/变量

转载 2016年08月30日 22:46:42

使用背景:

需要在其他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

复制代码
 1 //通过DOM操作获取app对象
 2 var element = angular.element($document.getElementById("app"));
 3 //得到app对象,可以获取app的controller
 4 var controller = element.controller();
 5 //得到app对象,可以获取app的$scope
 6 var scope = element.scope();
 7 //调用$scope中的方法
 8 scope.sub1();
 9 //调用方法后,可以重新绑定,在页面同步(可选)
10 scope.$apply();
11 //调用字段
12 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.

相关文章推荐

[从jQuery看JavaScript]-变量与作用域链(Variable and Scope Chain)

转载:http://blog.csdn.net/natineprince/article/details/4775008

AngularJS权威教程 笔记(AngularJS是一个很有意思的库,基于函数形参的依赖注入?酷!还有奇怪的$scope和指令)

目录(?)[+] AngularJS权威教程 跳转至: 导航、 搜索 目录 1初识AngularJS2数据绑定和第一个应用3模块4作用域5控制器6表达式...

AngularJS权威教程 笔记(AngularJS是一个很有意思的库,基于函数形参的依赖注入?酷!还有奇怪的$scope和指令)

AngularJS权威教程 跳转至: 导航、 搜索 目录 1 初识AngularJS2 数据绑定和第一个应用3 模块4 作用域5 控制器...
  • cteng
  • cteng
  • 2014年10月31日 17:38
  • 1886

asp.net中前台JavaScript库调用后台C#变量和有参函数方法

最近在做项目时,遇到了js库里调用后台的变量和函数的问题,一开始不知道咋办,google了很多。 1.封装成JavaScript库,其中调用后台C#变量:      网上有三种基本方法:  方法一:1...

javascript变量和函数

  • 2014年07月28日 13:12
  • 261KB
  • 下载

AngularJS系列之JavaScript函数和对象

这篇文章针对的是有2年以上编程经验的朋友们参考的,作参考资料之用,不从基础讲起。 在ES6之前,JavaScript没有class、extends、abstract这样的关键字。在支持ActiveX的...

AngularJS自定义指令directive:scope属性

一、介绍:在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令。自定义指令,是为了扩展DOM元素的功能。代码中,通过指定directive中的restrict属性,来决定这个...

深入理解 AngularJS 的 Scope

本文源地址链接:http://www.lovelucy.info/understanding-scopes-in-angularjs.html 本文作者:lovelucy 声明:本文为转载,请尊重...
  • qj30212
  • qj30212
  • 2016年09月09日 13:11
  • 131

angularJS自定义指令:scope属性

angularJs自定义指令中的scope属性有3种取值方式: 1、默认值false,即:默认直接用父scope,但比较危险 2、true,即:继承父scope 3、建立一个新的隔离scope,但是仍...

AngularJS入门(5)-Angular作用域($Scope)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。Scope 是一个对象,有可用的方法和属性, 可应用在视图和控制器上。 当我们在 Angula...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript调用AngularJS的函数/$scope/变量
举报原因:
原因补充:

(最多只允许输入30个字)