AngularJS $rootScopeと$scopeとthis
$rootScopeと$scopeとthisのメモ
$scopeはのプロパティは$rootScopeのプロパティのプロトタイプチェーンとなっているので
$scopeに定義されていなければ上へとたどる
そのためdeleteで消してやれば$rootScopeを参照することになる。
またController as 記法のthisはあくまでControllerオブジェクトに設定されたプロパティを参照しているだけにすぎない
$scopeの代わりに使用するものではあるが、全然別物。
そのため、Controller asと$scopeは併用も当然可能 。
angular.module('myapp', []) .controller('myController', function($rootScope, $scope){ this.hoge ='this.hoge'; $scope.hoge ='$scope.hoge'; $rootScope.hoge = '$rootScope.hoge'; console.log(this.hoge); // this.hoge console.log($scope.hoge); // $scope.hoge console.log($scope.$parent.hoge); // $rootScope.hoge delete $scope.hoge; console.log($scope.hoge); // $rootScope.hoge });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="angular.js"></script> <script src="script.js"></script> </head> <body ng-app="myapp"> <div ng-controller="myController as myctrl"> <div> {{myctrl}} <input ng-model="myctrl.hoge" /> </div> <div> {{this}} <input ng-model="this.hoge" /> <input ng-model="hoge" /> </div> </div> </body> </html>
まとめ
html中のthisが$scopeになるイメージ
asで設定した変数がControllerのプロパティになるイメージ