gpt4 book ai didi

angularjs - AngularJs中$scope对象的继承

转载 作者:行者123 更新时间:2023-12-02 23:03:00 25 4
gpt4 key购买 nike

我正在学习 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'。这怎么可能?

请解释一下

谢谢马尼瓦南

最佳答案

正如您在下面的架构中看到的,GrandChildControllerGrandChildController2 是兄弟,也是 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com