Search code examples
javascriptangularjsinheritanceprototypeangularjs-controller

Getting Function.prototype.bind.apply(...) is not a constructor error

I am trying to simulate Controller Inheritance in AngularJS (1.6.9), but I am getting an error on console as : Function.prototype.bind.apply(...) is not a constructor
Here is 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>

Here is 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 am trying to inherit mainCtrl in childCtrl but unable to do so. Output is not as expected. What could be the possible reason behind such an error?

Solution

  • You can't use the arrow notation everywhere in AngularJS.

    AngularJS tries to call a function with new your_function(){...} method, treating it like a class, and it fails to do that with the arrow notation new ()=>{...}.

    Simply change 

    app7.controller('mainCtrl',()=>{

    to 

    app7.controller('mainCtrl',function(){

    (as well as in other places)

    You also had the wrong logic with the printing child values. You needed to access .child. sub-property first before you could print anything.

    Here is a working example of your code:

    let app7 = angular.module('app7', []);

//Parent Controller

app7.controller('mainCtrl', function() {
  this.name = "Animal";
  this.sound = "Silent";

  this.animalClick = () => {
    alert(this.name + ' says ' + this.sound);
  };
});

//Child Controller

app7.controller('dogCtrl', function($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.child.name + ' says ' + this.child.sound + ' and ' + this.child.bark);
  };
});
    <!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>

</body>

</html>