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小提琴來說明這種行為