howdylikes

Google Developersってわかりづらいよね

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>

f:id:howdy39:20151208085110p:plain

まとめ

html中のthisが$scopeになるイメージ
asで設定した変数がControllerのプロパティになるイメージ