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>

Thusitha · Accepted Answer · 2017-09-22 17:01:16Z

1

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>

answered Sep 22, 2017 at 17:01

Thusitha

3,5113 gold badges23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dipanshu Over a year ago

Thanks a lot buddy @Thusitha

Thusitha Over a year ago

@Dipanshu Glad to help you. You can mark it as the correct answer ;)

Stanislav Kvitash · Accepted Answer · 2017-09-22 17:11:00Z

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+.

Collectives™ on Stack Overflow

No Inheritance is occuring in the angularJS code

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related