我对 AngularJS 范围的理解需要改进答案

【问题标题】：My AngularJS Scope understanding needs refinement我对 AngularJS 范围的理解需要改进
【发布时间】：2014-12-24 16:04:32
【问题描述】：

我做了一个很小的例子，我认为它的行为会有所不同。我创建了两个嵌套的 div 标签并将它们的控制器称为 ParentController 和 ChildController。我为两者分配了相同的变量（$scope.mydata}。

我的期望是改变孩子只会更新孩子，但改变父母会更新两者。他们似乎彼此孤立。

请戳这里：http://plnkr.co/edit/zETedNQiO1hwf3ucW7wG?p=preview

<html>
<head>
    <meta charset="utf-8">
    <title>misc1</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <link rel="stylesheet" href="jquery.cluetip.css" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="script.js"></script>
</head>
<body ng-app="myapp" ng-controller="MainCtrl">

<div ng-controller="ParentController">
    <input ng-model="mydata" placeholder="Some Data">
    ... ParentController:mydata: {{ mydata }}
    <div ng-controller="ChildController">
        <input ng-model="mydata" placeholder="Some Data">
        ... ChildController:mydata: {{ mydata }}
    </div>
</div>

</body>
</html>

...

var app = angular.module('myapp', []);
app.controller('MainCtrl', function ($scope) {
});

app.controller('ParentController', function ($scope) {
    $scope.mydata = 'parent data';
});
app.controller('ChildController', function ($scope) {
    $scope.mydata = 'child data';
});

【问题讨论】：

阅读link here

标签： angularjs angularjs-scope

【解决方案1】：

简短的回答是，由于原型继承，子范围会影响其父属性。

要深入了解其工作原理，请阅读 Mark 的出色回答 What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

【讨论】：

谢谢，我想我明白了。我认为这句话可以从您发送给我的链接中解释。 “原型链没有被咨询，并且在childScope中添加了一个新的aString属性。这个新属性隐藏/隐藏了同名的parentScope属性。当我们在下面讨论ng-repeat和ng-include时，这将变得非常重要。 "