获取 Function.prototype.bind.apply(...) 不是构造函数错误

Question

我正在尝试在 AngularJS (1.6.9) 中模拟控制器继承，但我在控制台上收到错误消息：Function.prototype.bind.apply(...)不是构造函数
这是 HTML 文件：

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

这是 JS 文件：

//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);
  };
});

我正在尝试继承 childCtrl 中的 mainCtrl，但无法这样做。输出不符合预期。这种错误背后的可能原因是什么？

Answer 1

您不能在 AngularJS 中的任何地方使用 箭头符号 。

AngularJS 尝试使用 new your_function(){...} 方法调用函数，将其视为 class，但使用箭头符号 new ()=>{...} 无法做到这一点。

只需更改

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

到

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

（以及其他地方）

您打印子值的逻辑也有误。在打印任何内容之前，您需要先访问 .child. sub-property。

这是您的代码的一个工作示例：

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>

获取 Function.prototype.bind.apply(...) 不是构造函数错误

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

javascript

inheritance

prototype

angularjs

angularjs-controller