angularJS代码中没有发生继承答案

【问题标题】：No Inheritance is occuring in the angularJS codeangularJS代码中没有发生继承
【发布时间】：2017-09-23 01:11:00
【问题描述】：

这是一个 AngularJS 继承代码，其中在函数中应用了继承，但此代码没有输出。
custDetails 和 empPaycheck 是应用继承的两个函数，但代码有一些我无法找到的错误。

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

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

您应该使用$scope.$parent 访问子控制器中的父$scope 变量。同样在您的 HTML 代码中，controller 应该是 ng-controller 的错字。
请看以下工作示例。

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>

【讨论】：

非常感谢好友@Thusitha
@Dipanshu 很高兴为您提供帮助。您可以将其标记为正确答案；）

【解决方案2】：

$rootScope.taxPe 附近的 module 运行块中有错误；
您使用的是controller 属性而不是ng-controller。

这是一个工作代码sn-p：

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.：我个人会not recommend using $rootScope 和范围继承，您可以使用services 在控制器之间共享数据。还建议您查看 v1.5+ 中的 component API。

【讨论】：