javascript - Angular : Modify model of parent scope in a directive with '=xxx' isolate scope?

Question

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

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

如您所见，我正在尝试 2 种解决方案来访问和加载完整的用户配置文件:onClickBindTo和 onPersonClick

我像那样使用它来呈现人员及其 friend 的列表:

// 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>

---

在模板上，我有一个链接应该更改 Controller 的属性(称为 currentProfileUri)

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

我可以看到 Controller 范围变量 currentProfileUri在 personTemplate.html 中可用，因为我添加了调试输入:<input type="text" ng-model="onClickBindTo"/>

不幸的是，当我修改输入值或单击链接时，currentProfileUri Controller 的未更新。这是正常现象还是我遗漏了什么？

---

另一种方法似乎工作正常:

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

那么要修改父作用域的模型，我们需要使用父作用域函数吗？

---

顺便说一句，用&传递一个表达式，我尝试了另一种解决方案:不使用在 Controller 范围内声明的函数:

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

怎么不行呢？

---

我的 Controller 没什么特别的:

$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 的新手，到处都读到使用隔离作用域允许与父作用域进行双向数据绑定(bind)，所以我不明白为什么我的更改没有传播到父作用域，而我的调试语句却没有。除非我使用作用域函数 changeCurrentProfileUri 否则不会触发

谁能给我解释一下它是如何工作的？

Answer 1

在您的示例中，范围层次结构如下:

controller scope 
    ng-repeat scope
        foaf-person scope

因此，当您为“currentProfileUri”声明双向绑定(bind)时，它实际上绑定(bind)到由 ng-repeat 创建的范围，而不是由 Controller 创建，并且当您的代码更改 onClickBindTo 的值时，angularjs 在中执行“currentProfileUri = newValue” ng-repeat 范围。

解决方案是使用对象而不是原始值进行双向绑定(bind)——在这种情况下，范围继承总是以正确的方式工作。我的意思是这样的:

// 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>

我已经准备好了a js-fiddle which illustrates this behavior