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.

ZH奶酪:JavaScript调用AngularJS的函数/$scope/变量

使用背景: 需要在其他JavaScript文件中调用AngularJS内部方法或改变$scope变量,同时还要保持双向数据绑定; 首先获取AngularJS application: ...
  • gold0523
  • gold0523
  • 2016年01月20日 23:09
  • 1005

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

ZH奶酪:JavaScript调用AngularJS的函数/$scope/变量 使用背景: 需要在其他JavaScript文件中调用AngularJS内部方法或改变$scope变量...
  • phker
  • phker
  • 2015年08月27日 09:04
  • 8824

对AngularJs中$scope的深入理解

$scope在AngularJS中可谓十分重要,是AngularJS中MVC的基础,也是实现双向数据绑定的基础,那么我们该如何理解$scope呢? 首先,$scope本身是一个普通的JavaScri...
  • key_next
  • key_next
  • 2016年04月19日 20:53
  • 2310

AngularJS 中的scope($scope)

使用angalarJS一定要先明白控制器的作用域继承,在开发自定义指令时要清楚当前指令所使用的作用域在哪?...
  • xiaofanku
  • xiaofanku
  • 2016年03月31日 17:24
  • 2217

$scope.变量名可以动态声明吗?

https://segmentfault.com/q/1010000009328744 https://segmentfault.com/q/1010000003743012?_ea=369071 ...
  • tiramisu_ljh
  • tiramisu_ljh
  • 2017年05月30日 14:47
  • 946

angular笔记 directive scope 调用父scope带参数方法

在使用angular directive的时候,为了不污染环境,我们为给directive自己一个scope,如果这个scope需要使用父类中scope的对象,会使用 = & @三种标示,在开发项目中...
  • ft6302244
  • ft6302244
  • 2015年03月23日 09:41
  • 7156

外部js调用Angular控制器中的函数方法或变量用法示例

     Test   
  • qianqianyixiao1
  • qianqianyixiao1
  • 2016年11月22日 10:07
  • 1399

AngularJS自定义指令directive:父类scope和指令中scope之间的通信

我们知道angularJs中,指令中有scope,父类controller中也有scope,两者的通信方式有三中,分别是 scope:false;直接使用父类的scope scope:true;继承父...
  • stsshenwei
  • stsshenwei
  • 2017年04月03日 18:40
  • 293

angularjs指令link函数参数scope,指令controller依赖注入的$scope,与指令外部controller的$scope的关系

还是看代码 当指令中scope:false时                                                          ...
  • u014788227
  • u014788227
  • 2015年12月30日 16:35
  • 3929

AngularJS: 使用Scope时的6个陷阱

AngularJS: 使用Scope时的6个陷阱 在使用AngularJS中的scope时,会有6个主要陷阱。如果你理解AngularJS背后的概念的话,这6个点其实非常的简单。但是在具...
  • u013291076
  • u013291076
  • 2014年12月26日 15:56
  • 1556
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript调用AngularJS的函数/$scope/变量
举报原因:
原因补充:

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