Blog- AngularJS-parent-child-scope

by beltiste

HTML

<script src="http://www.flocations.com/static/vendor/angularjs/1.0.2/angular.min.js"></script>
<div ng-app>
    <div ng-controller="Parent">
        parentX = {{x}} <br/>
        parentY = {{y}}<br/>
        <div ng-controller="Child">
            childX = {{x}}<br/>
            childY = {{y}}<br/>
            <a ng-click="modifyBothScopes()">modifyBothScopes</a><br>
            <a ng-click="modifyonlyChildscope()">modifyonlyChildscope</a>
        </div>
    </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<style>

JavaScript

function Parent($scope) {
    $scope.x= 5;
    $scope.y= 5;
}

function Child($scope) {
    $scope.modifyBothScopes= function() {
       $scope.$parent.x++;
    };
    $scope.modifyonlyChildscope= function() {
       // member "y" will be created in the child scope
       // So, after the following statment,  $scope.$parent.y++  will only increment the parent scope. It would not affect the child scope.
       $scope.y++;
    };
    
}