読者です 読者をやめる 読者になる 読者になる

$scopeをng-controllerの外から参照する

JavaScript AngularJS

メモ。AngularJSの$scopeをng-controllerの外から参照する方法。
angular.elementを使ってDOMをラップしたオブジェクトを取得し、scopeメソッドを呼ぶ。
AngularJS: API: angular.element
試したのはAngularJS 1.2.27。

test.html

<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="test()">test</button>
<div ng-app="myApp">
  <div ng-controller="myController" id="myElement"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', function($scope) {
  $scope.foo = "Hello!";
}]);

function test() {
  var element = document.getElementById("myElement");
  // jQueryかjqLiteが有効な場合はセレクタを使える
  // var $scope = angular.element('#myElement').scope()
  var $scope = angular.element(element).scope()
  alert($scope.foo);
}
</script>
</body>
</html>

testボタンをクリックすると「Hello!」という文字列が表示される。