AngularJS代码中没有任何继承

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

您应该使用 $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>

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。：我个人不建议使用$rootScope和范围继承，您可以使用服务在控制器之间共享数据。还建议您查看v1.5 。

中的component API

相关内容

最新更新

热门标签：