AngularJS：修改带有'= xxx'隔离范围的指令中父范围的模型吗？

Question

我有一个Angular指令，该指令允许呈现用户，并创建一个链接以查看用户配置文件，声明为：

.directive('foafPerson', function() {
    return {
      restrict: 'E',
      templateUrl: 'templates/person.html',
      scope: {
        personModel: '=',
        onClickBindTo: '=',
        onPersonClick: '&'
      }
    };

如您所见，我正在尝试2种解决方案，以便能够访问和加载完整的用户个人资料： onClickBindTo和onPersonClick

我这样使用它来呈现人员及其朋友的列表：

// display the current user
<foaf-person person-model="person" on-person-click="changeCurrentProfileUri(person.uri)" on-click-bind-to="currentProfileUri"></foaf-person>

// display his friends
<div class="profileRelationship" ng-repeat="relationship in relationships">
    <foaf-person person-model="relationship" on-person-click="changeCurrentProfileUri(relationship.uri)" on-click-bind-to="currentProfileUri"></foaf-person>
</div>

---

在模板上，我有一个链接，该链接应该更改控制器的属性（称为currentProfileUri）

<a href="" ng-click="onClickBindTo = personModel.uri">
    {{personModel.name}}
<a/>

我可以看到person模板中提供了控制器作用域变量currentProfileUri ，因为我添加了调试输入： <input type="text" ng-model="onClickBindTo"/>

不幸的是，当我修改输入值或单击链接时，不会更新控制器的currentProfileUri 。 这是正常现象还是我缺少了什么？

---

使用另一种方法似乎可以正常工作：

<a href="" ng-click="onPersonClick()">
    {{personModel.name}}
<a/>

因此，要修改父范围的模型，是否需要使用父范围函数？

---

顺便说一句，通过&传递表达式，我尝试了另一种解决方案：不使用在控制器范围内声明的函数：

<foaf-person person-model="relationship" on-person-click="currentProfileUri = relationship.uri"></foaf-person>

怎么不起作用？

---

我的控制器没有任何真正的幻想：

$scope.currentProfileUri = 'https://my-profile.eu/people/deiu/card#me';

$scope.$watch('currentProfileUri', function() {
  console.debug("currentProfileUri changed to "+$scope.currentProfileUri);
  loadFullProfile($scope.currentProfileUri);
})

$scope.changeCurrentProfileUri = function changeCurrentProfileUri(uri) {
  console.debug("Change current profile uri called with " + uri);
  $scope.currentProfileUri = uri;
}

---

我是Angular的新手，并且到处都读到使用隔离范围允许与父范围进行双向数据绑定，所以我不明白为什么我的更改不会传播到父范围并且调试语句不会触发，除非我使用范围函数changeCurrentProfileUri

有人可以解释一下它是如何工作的吗？

Answer 1

在您的示例中，作用域层次结构如下：

controller scope 
    ng-repeat scope
        foaf-person scope

因此，当您声明“ currentProfileUri”的双向绑定时，它实际上是绑定到ng-repeat创建的作用域，而不是控制器，并且当您的代码更改onClickBindTo的值时，angularjs在ng-exe中执行“ currentProfileUri = newValue”重复范围。

解决方案是使用对象而不是原始值进行双向绑定-在这种情况下，作用域继承始终以正确的方式起作用。 我的意思是这样的：

// display the current user
<foaf-person person-model="person" on-click-bind-to="currentProfile.uri"></foaf-person>

// display his friends
<div class="profileRelationship" ng-repeat="relationship in relationships">
    <foaf-person person-model="relationship" on-click-bind-to="currentProfile.uri"></foaf-person>
</div>

我准备了一个js小提琴来说明这种行为