AngularJS: Protoypical Inheritance

by beltiste

HTML

<script src="http://ci.angularjs.org/job/angular.js-angular-master/ws/build/angular.js"></script>
<div ng-controller="Parent">
  A = {{data.a}}<br>
  B = {{b}}<br>
    C = {{c}}<br>
  D = {{data.d}}<br>
     D = {{d}}<br>
<div ng-controller="Child">
    <a ng-click="incrementA()">inc A</a> | <a ng-click="incrementB()">inc B</a> | <a ng-click="incrementC()">inc C</a> | <a ng-click="incrementD()">inc D</a><br>
    A = {{data.a}}<br>
  B = {{b}}<br>
    C = {{c}}<br>
  D = {{data.d}}<br>
     D = {{d}}<br>
</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.data = {
        a: 0,
        d: 5
    };
    $scope.b = 0;
}

function Child($scope) {
    $scope.incrementA = function() {
        // it's through "data" obj, so we are chaning the value defined on parent scope
        $scope.data.a++;
    };
    
    $scope.incrementB = function() {
        // $scope.b++ would create "b" property on current scope
        $scope.$parent.b++;
    };
    
    $scope.incrementC = function() {
        
        if ($scope.$parent.c >= 0) {
        $scope.$parent.c++;
        } else {
            $scope.$parent.c = 0;
        }
    };
    
    $scope.incrementD = function() {
        // $scope.b++ would create "b" property on current scope
        $scope.$parent.d++;
    };
}