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/

 

JavaScript調用AngularJS的函數/$scope/變數