No Inheritance is occuring in the angularJS code

Question

This is an AngularJS inheritance code where the inheritance is applied in the functions but there is no output coming for this code.
custDetails and empPaycheck are the two functions where inheritance is applied but the code has some error which I am not been able to find.

 <html lang="">

<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Controller Inheritance</title>

        <script src="angulaar.min.js"></script>
<script>
var app = angular.module("sample",
        []).run(["$rootScope",function($rootScope){
        $rootScope.taxPe`enter code here`rcent = 30;
        }]);

        app.controller("custDetails", ["$scope",function($scope) {
            $scope.Name = "Dipanshu";
            $scope.Sal = 45000;
            $scope.Dept = "Testing";
        }]);

        app.controller("empPayCheck", ["$scope", "$rootScope",    
            function($scope, $rootScope) {
            $scope.getTaxes = function() {
            return $scope.Sal * $rootScope.taxPercent / 100;
            };

        $scope.getNet = function() {
            return $scope.Sal - $scope.getTaxes();
        };
    }]);
</script>

</head>

    <body ng-app="sample">
        <div ng-controller="custDetails">
            Employee Details of {{Name}}

        <div ng-controller="custDetails">
                {{Name}} earns {{Sal}} rs and is in <strong>{{Dept}}</strong>
                Department.

            <div controller="empPayCheck">
                Tax: {{getTaxes()}}
                <br> Net Amount: {{getNet()}}
            </div>
        </div>
    </div>
</body>

</html>

score 1 · Answer 1 · answered Sep 22 '17 at 17:01

You should use $scope.$parent to access parent $scope variables in a child controller. Also in your HTML code there's a typo where controller should be ng-controller.
Look at the following working example.

var app = angular.module("sample", []).run(["$rootScope", function($rootScope) {
  $rootScope.taxPercent = 30;
}]);

app.controller("custDetails", ["$scope", function($scope) {
  $scope.Name = "Dipanshu";
  $scope.Sal = 45000;
  $scope.Dept = "Testing";
}]);

app.controller("empPayCheck", ["$scope", "$rootScope",
  function($scope, $rootScope) {
      
    $scope.getTaxes = function() {
      return $scope.$parent.Sal * $rootScope.taxPercent / 100;
    };

    $scope.getNet = function() {
      return $scope.$parent.Sal - $scope.getTaxes();
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="sample">
  <div ng-controller="custDetails">
    Employee Details of {{Name}}

    <div>
      {{Name}} earns {{Sal}} rs and is in <strong>{{Dept}}</strong> Department.

      <div ng-controller="empPayCheck">
        Tax: {{getTaxes()}}
        <br> Net Amount: {{getNet()}}
      </div>
    </div>
  </div>
</body>

@Dipanshu Glad to help you. You can mark it as the correct answer ;) — Thusitha, Sep 22 '17 at 17:32

Stanislav Kvitash · Accepted Answer · 2017-09-22T17:11:00.543

There is error in your module run block near $rootScope.taxPe;
You are using controller attribute instead of ng-controller.

Here is a working code snippet:

var app = angular.module("sample", []).run(["$rootScope", function($rootScope) {
  $rootScope.taxPercent = 30;
}]);

app.controller("custDetails", ["$scope", function($scope) {
  $scope.Name = "Dipanshu";
  $scope.Sal = 45000;
  $scope.Dept = "Testing";
}]);

app.controller("empPayCheck", ["$scope", "$rootScope",
  function($scope, $rootScope) {
    $scope.getTaxes = function() {
      return $scope.Sal * $rootScope.taxPercent / 100;
    };

    $scope.getNet = function() {
      return $scope.Sal - $scope.getTaxes();
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="sample">
  <div ng-controller="custDetails">
    Employee Details of {{Name}}

    <div ng-controller="custDetails">
      {{Name}} earns {{Sal}} rs and is in <strong>{{Dept}}</strong> Department.

      <div ng-controller="empPayCheck">
        Tax: {{getTaxes()}}
        <br> Net Amount: {{getNet()}}
      </div>
    </div>
  </div>
</body>

P.S.: Personally I would not recommend using $rootScope and scope inheritance, you can use services to share data between controllers. Also would suggest you looking into component API that comes in v1.5+.

No Inheritance is occuring in the angularJS code

2 Answers2