Angularjs 当我期望未定义时，父控制器可以看到在子控制器中设置的属性_Angularjs_Scope

Angularjs 当我期望未定义时，父控制器可以看到在子控制器中设置的属性

angularjs

Angularjs 当我期望未定义时，父控制器可以看到在子控制器中设置的属性,angularjs,scope,Angularjs,Scope,我有以下角度代码： index.html <body> <main ng-app="app"> <div class="container"> <div class="parent" ng-controller="ParentController"> <p>{{person.name}}</p> <p>

我有以下角度代码：

index.html

<body>
    <main ng-app="app">
        <div class="container">
            <div class="parent" ng-controller="ParentController">
                <p>{{person.name}}</p>
                <p>{{person.email}}</p>
                <div class="child" ng-controller="ChildController">
                    <div class="">
                        <p><input type="text" ng-model="email"></p>
                        <button ng-click="updateEmail(email)" name="button">Submit Email</button>
                    </div>
                    <p>{{person.name}}</p>
                    <p>{{person.email}}</p>
                </div>
            </div>
        </div>
    </main>

    <script src="scripts\lib\angular.min.js" charset="utf-8"></script>
    <script src="scripts\controllers\ParentController.js" charset="utf-8"></script>
</body>

我希望看到{{person.email}}页面上出现“undefined”的dipslay，它位于ParentController内部和ChildController外部，但事实并非如此。加载页面时，我可以在ParentController和ChildController中看到我的占位符值。如果尚未在对象上设置属性，ParentController如何查看在ChildController中设置的属性值。我知道由于继承，ChildController应该能够看到ParentController中的所有内容，这正是我测试的内容。但是为什么ParentController可以看到person.email的值呢？

原因是，当

ChildController

获取

person

对象时，它引用的是

ParentController

对象，而不是创建一个新的（根据原型继承）对象，所以引用是这样自动完成的？我认为在手动更新ChildController之前不会有任何变化。我强烈建议仔细阅读，因为我认为在ChildController设置person.email属性之前会呈现ParentController，所以在手动更改ChildController之前，我会看到未定义。同时查看

控制器作为

语法，这将有助于更好地组织您的范围。

var app = angular.module("app", []);

app.controller("ParentController", ParentController);
app.controller("ChildController", ChildController);

ParentController.$inject = ["$scope"];
ChildController.$inject = ["$scope"];

function ParentController($scope) {
    $scope.person = {
        name: "Name"
};
}

function ChildController($scope) {
    $scope.person.email = "Not the real email";
    $scope.updateEmail = function(theEmail) {
        $scope.person.email = theEmail;
    };
}