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

复制代码
 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奶酪博客园博客,原文链接:http://www.cnblogs.com/CheeseZH/p/4515638.html,如需转载请自行联系原作者

相关文章
|
24天前
|
JavaScript 前端开发
获取JavaScript时间戳函数的5种方法
获取JavaScript时间戳函数的5种方法
18 0
|
24天前
|
JavaScript
在js中如何将数组传递到函数呢?
在js中如何将数组传递到函数呢?
|
26天前
|
JavaScript 前端开发 测试技术
[小笔记]TypeScript/JavaScript模拟Python中的Range函数
[小笔记]TypeScript/JavaScript模拟Python中的Range函数
11 0
|
19天前
|
XML 存储 JavaScript
深入理解JS语法与变量
深入理解JS语法与变量
33 1
|
20天前
|
JavaScript
js惰性函数
js惰性函数
9 0
|
20天前
|
自然语言处理 JavaScript 前端开发
超越函数界限:探索JavaScript函数的无限可能
JavaScript中的函数是一种重要的编程概念,它允许我们封装可重用的代码块,并在需要时进行调用。本文将深入介绍JavaScript函数的各个方面,包括函数定义和调用、参数和返回值、作用域和闭包、高阶函数以及常见的函数应用场景。
|
22天前
|
前端开发 JavaScript Java
前端(JavaScript)------函数与对象
前端(JavaScript)------函数与对象
47 0
|
23天前
|
JavaScript 前端开发
什么是 JavaScript 的匿名自执行函数
什么是 JavaScript 的匿名自执行函数
17 0
|
24天前
|
JavaScript 前端开发
js定义函数的三种方式
js定义函数的三种方式
7 0
|
26天前
|
前端开发 JavaScript 开发者
深入探讨JavaScript函数(二)
深入探讨JavaScript函数
34 2

相关产品

  • 云迁移中心