獲取Function.prototype.bind.apply（...）不是構造函數錯誤

Question

我試圖在AngularJS（1.6.9）中模擬Controller繼承，但我在控制台上收到錯誤： 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 your_function(){...}類，並且使用箭頭符號new ()=>{...}無法執行此操作。

簡單地改變

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

至

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

（以及其他地方）

打印子值也有錯誤的邏輯。 你需要訪問.child. 在您打印任何內容之前，首先要使用子屬性。

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

 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（...）不是構造函數錯誤

問題描述

1 個解決方案

解決方案1
9 已采納 2018-03-14 09:23:36

獲取Function.prototype.bind.apply（...）不是構造函數錯誤

問題描述

1 個解決方案

解決方案1 9 已采納 2018-03-14 09:23:36

解決方案1
9 已采納 2018-03-14 09:23:36