角度范围绑定

Question

我正在看书，并使用以下版本的Angular： https : //ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js[1]

这是我的模板：

<div ng-controller="ParentController">
    <div ng-controller="ChildController">
        <a ng-click="sayHello()">Say hello</a>
    </div>
    {{ person }}
</div>

这是我的控制器代码：

app.controller('ParentController', function ($scope) {
    $scope.person = { greeted: false };

});

app.controller('ChildController', function ($scope) {
    $scope.sayHello = function () {
        $scope.person = { name: "Ari Lerner", greeted: true };
    }
});

我注意到我的代码不会不会按预期更新模板，除非我将sayHello方法更改为：

$scope.sayHello = function () {
    $scope.person.name = "Ari Lerner";
    $scope.person.greeted = true;
};

关于为什么会这样的任何见解？ 我当时假设更新人员将反映在DOM中。

---

使用1.4.2会产生相同的结果。

考虑到属性的索引可能有所不同，我尝试了以下操作：

$scope.person.name = { greeted: true, name: "Ari Lerner" };

（交换问候和名字）

疯狂的猜测：在我看来，Angular中的某些内容正在保留分配给$ scope.person的原始对象，并将$ scope.person设置为新对象会“丢失”数据绑定。 这是真的？

Answer 1

在AngularJS中，范围使用其父级的原型继承。

原型继承基本上意味着，如果JavaScript在子作用域上找不到属性，它将查看父作用域。

因此，当您执行$scope.person.name = 'Ari Lerner' ，JavaScript会查看$scope ，看到它没有person属性，然后转到它的父级（父级作用域），看到它有一个person属性，并将其name属性分配给'Ari' 。

另一方面，当您执行$scope.person = { ... } ，JavaScript不在乎该属性是否存在-它只是执行分配，确保您的$scope现在具有person属性。 这里的问题是您的子作用域的person属性现在会遮盖父作用域的person属性，而父属性仍然具有其原始值。 因此，在父控制器中， person永远不会改变。

要进一步阅读，请在此处检查以下答案：

AngularJS中范围原型/原型继承的细微差别是什么？

Answer 2

您正在创建一个从其父范围原型继承的子范围。 除非您使用隔离范围（指令），否则会出现这种情况。

有关真正的绝佳解释，请参阅此处AngularJS中范围原型/原型继承的细微差别是什么？

Answer 3

正如其他人所述，这是因为您的范围。

例如，如果要在childScope中创建一个新对象，则可以执行$scope.someObject = {}; 。 现在，JavaScript无法知道两者之间的区别

$scope.someNewObject = {};

和

$scope.person = {};

因为您只是将新对象分配给您的子范围。 另一个表示法起作用，因为通过获取$scope.person.attribute = ... JavaScript知道，该person对象已经存在。 它开始在您的子范围中寻找该对象，在那里找不到它，转到父范围并在那里找到它并设置属性。

总之，您必须使用$scope.person.attribute ，或者使用$scope.$parent.person = {}; $scope.person.attribute

Answer 4

要从childController（子作用域）编辑$ scope.person，请像这样使用$ scope。$ parent。

app.controller('ChildController', function ($scope) {
    $scope.sayHello = function () {
        $scope.$parent.person = { name: "Ari Lerner", greeted: true };
    }
});