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

最新推荐文章于 2020-07-19 16:49:41 发布

weixin_33901926

最新推荐文章于 2020-07-19 16:49:41 发布

阅读量218

点赞数

文章标签： javascript ViewUI

本文介绍如何在其他JavaScript文件中调用AngularJS内部方法或改变$scope变量，并保持双向数据绑定。提供了两种方法：通过controller获取app及通过DOM操作获取app。此外还介绍了几个关键函数，如获取当前元素的$scope等。

摘要由CSDN通过智能技术生成

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