Question

这是一个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>

Answer 1

您应该使用$scope.$parent访问子控制器中的父$scope变量。另外在您的HTML代码中，controller应该是ng-controller的拼写错误请看下面的工作示例。

＆＃13;

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();
    };
  }
]);

＆＃13;

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

＆＃13;

Answer 2

module附近的$rootScope.taxPe运行区中出现错误
您使用的是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.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。

angularJS代码中没有发生继承

2 个答案: