Question

我做了一个非常小的例子，我认为会有不同的表现。我创建了两个嵌套的div标签，并调用它们的控制器ParentController和ChildController。我为两个（$ scope.mydata}分配了相同的变量。

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

plnkr：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';
});

Answer 1

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

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

我的AngularJS Scope理解需要改进

1 个答案: