I'm attempting to implement Controller Inheritance in AngularJS (1.6.9), but encountering an error in the console: Function.prototype.bind.apply(...) is not a constructor. Here's the snippet from the HTML file:
<!-- Controller Inheritance -->
<!DOCTYPE html>
<html lang="en" ng-app="app7">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tutorial 7</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-controller="mainCtrl as parent">
<p>Name: {{parent.name}}</p>
<p>Sound: {{parent.sound}}</p>
<button ng-click="parent.animalClick()">Animal Data</button>
</div>
<br><br>
<div ng-controller="dogCtrl as dog">
<p>Name: {{dog.child.name}}</p>
<p>Sound: {{dog.child.sound}}</p>
<button ng-click="dog.child.animalClick()">Dog Data</button>
<button ng-click="dog.child.dogData()">Get More Data</button>
</div>
<script src="js/exam7.js"></script>
</body>
</html>
And here's the corresponding code from the JS file:
//Controller Inheritance Demonstration
let app7 = angular.module('app7',[]);
//Parent Controller
app7.controller('mainCtrl',()=>{
this.name="Animal";
this.sound="Silent";
this.animalClick= ()=>{
alert(this.name+' says '+this.sound);
};
});
//Child Controller
app7.controller('dogCtrl',($controller)=>{
let childCtrl = this;
childCtrl.child=$controller('mainCtrl',{});
childCtrl.child.name="Dog";
childCtrl.child.bark="Woof"; //child`s own variable
childCtrl.child.dogData = ()=>{
alert(this.name+' says '+this.sound+' and '+this.bark);
};
});
I'm striving to inherit mainCtrl within childCtrl, but facing difficulties. The output is not matching expectations. Any insights into why this particular error is occurring?