ZH奶酪: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.
参考文章:
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奶酪(张贺)
邮箱:
cheesezh@qq.com
出处:
http://www.cnblogs.com/CheeseZH/
*
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。