Question

我正在尝试在AngularJS中模拟Controller继承（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);
  };
});

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

Answer 1

您无法在AngularJS中的任何位置使用箭头符号。

AngularJS尝试使用new your_function(){...}方法调用函数，将其视为类，并且使用箭头符号new ()=>{...}无法执行此操作。

只需更改

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

到

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

（以及其他地方）

打印子值也有错误的逻辑。在打印任何内容之前，您需要首先访问.child.子属性。

以下是您的代码的工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

获取Function.prototype.bind.apply（...）不是构造函数错误

1 个答案: