我正在学习 AngularJS。我对 $scope 对象的继承感到困惑。就像我希望 $scope 对象特定于 Controller 一样。它如何将值继承给其他 Controller 。以下代码取自官方文档
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example9-production</title>
<link href="app.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="scopeInheritance">
<div class="spicy">
<div ng-controller="MainController">
<p>Good {{timeOfDay}}, {{name}}!</p>
<div ng-controller="ChildController">
<p>Good {{timeOfDay}}, {{name}}!</p>
<div ng-controller="GrandChildController">
<p>Good {{timeOfDay}}, {{name}}!</p>
</div>
<div ng-controller="GrandChildController2">
<p>Good {{timeOfDay}}, {{name}}!</p>
</div>
</div>
</div>
</div>
</body>
</html>
App.js
(function(angular) {
'use strict';
var myApp = angular.module('scopeInheritance', []);
myApp.controller('MainController', ['$scope', function($scope) {
$scope.timeOfDay = 'morning';
$scope.name = 'Nikki';
}]);
myApp.controller('ChildController', ['$scope', function($scope) {
$scope.timeOfDay = 'morning2';
$scope.name = 'Mattie';
}]);
myApp.controller('GrandChildController', ['$scope', function($scope) {
$scope.timeOfDay = 'evening';
$scope.name = 'Gingerbread Baby';
}]);
myApp.controller('GrandChildController2', ['$scope', function($scope) {
}]);
})(window.angular);
GrandChildController2 Controller 未更改 $scope 对象的名称和 timeOfDay 属性。我期望输出应该是这样的
timeOfDay ='evening' 和 name = 'Gingerbread Baby'(如果它继承自父级)。但令人惊讶的是，GrandChildController2 Controller 的输出是 timeOfDay ='Goodmorning2' 和 name ='Mattie'。这怎么可能？
请解释一下
谢谢 马尼瓦南
最佳答案
正如您在下面的架构中看到的，GrandChildController 和 GrandChildController2 是兄弟，也是 ChildController 的儿子(正如他们的名字所暗示的那样)。
<div ng-controller="MainController">
|
|-- <p>Good {{timeOfDay}}, {{name}}!</p> <!-- Good morning, Nikki'! -->
|
| <!-- inherits from MainController and then overwrite -->
|-- <div ng-controller="ChildController">
|-- <p>Good {{timeOfDay}}, {{name}}!</p> <!-- Good morning2, Mattie! -->
|
| <!-- inherits from ChildController and then overwrite -->
|-- <div ng-controller="GrandChildController">
| <p>Good {{timeOfDay}}, {{name}}!</p> <!-- Good evening, Gingerbread Baby! -->
|-- </div>
|
| <!-- inherits from ChildController and does NOT overwrite -->
|-- <div ng-controller="GrandChildController2">
| <p>Good {{timeOfDay}}, {{name}}!</p> <!-- Good morning2, Mattie! -->
|-- </div>
|
|-- </div> <!-- CLOSE ChildController -->
</div> <!-- CLOSE MainController -->
因此，GrandChildController2 从其父 ChildController 继承 $scope，其中 $scope.timeOfDay = 'morning2'和$scope.name = 'Mattie'。
您的期望
要获得您期望的行为(GrandChild2 继承自 GrandChild)，架构必须如下所示:
<div ng-controller="MainController">
|
|-- <p>Good {{timeOfDay}}, {{name}}!</p> <!-- Good morning, Nikki'! -->
|
| <!-- inherits from MainController and then overwrite -->
|-- <div ng-controller="ChildController">
|-- <p>Good {{timeOfDay}}, {{name}}!</p> <!-- Good morning2, Mattie! -->
|
| <!-- inherits from ChildController and then overwrite -->
|-- <div ng-controller="GrandChildController">
|-- <p>Good {{timeOfDay}}, {{name}}!</p> <!-- Good evening, Gingerbread Baby! -->
|
| <!-- inherits from GrandChildController and does NOT overwrite -->
|-- <div ng-controller="GrandChildController2">
| <p>Good {{timeOfDay}}, {{name}}!</p> <!-- Good evening, Gingerbread Baby! -->
|-- </div>
|
|-- </div> <!-- CLOSE GrandChildController -->
|-- </div> <!-- CLOSE ChildController -->
</div> <!-- CLOSE MainController -->
关于angularjs - AngularJs中$scope对象的继承，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34309550/