为什么我的嵌套指令在调用 $setViewValue() 后立即与它的 ngModel 断开连接？

Question

Plunker here.

我有一个指令（“子”）嵌套在另一个指令（“父”）中。 requires ngModel 和 ngModelCtrl.$modelValue 在其模板中显示并保持最新状态。也就是说，直到我调用 ngModelCtrl.$setViewValue()。

下面是初始化指令的 HTML：

<div parent>
  <div child ng-model="content">Some</div>
</div>

以下是指令：

angular.module('form-example2', [])
  .controller('MainCtrl', function($scope){
  $scope.content = 'Hi';
})
.directive('parent', function() {
  return {
    transclude: true,
    template: '<div ng-transclude></div>',
    controller: function(){
    },
    scope: {}
  };
})
.directive('child', function() {
  return {
    require: ['ngModel', '^parent'],
    transclude: true,
    template: '<div>Model: {{model.$modelValue}} (<a style="text-decoration: underline; cursor: pointer;" ng-click="alter()">Alter</a>)<br />Contents: <div style="background: grey" ng-transclude></div></div>',
    scope: {},
    link: function(scope, elm, attrs, ctrl) {
      var ngModelCtrl = ctrl[0];
      var parentCtrl = ctrl[1];

      scope.model = ngModelCtrl;

      // view -> model
      scope.alter = function(){
        ngModelCtrl.$setViewValue('Hi2');
      }

      // model -> view

      // load init value from DOM
    }
  };
});

当模型（即content）发生变化时，可以在子指令中看到这种变化。当您单击“Alter”链接（触发 $setViewValue() 调用）时，模型的值应变为“Hi2”。这在 child 指令内正确显示，但不在指令外的模型中显示。此外，当我现在在指令外更新模型时，它不再在指令内更新。

怎么会？

Answer 1

指令结果很好；唯一的问题是传递的模型应该是一个对象属性。因此，如果对调用代码 (Plunker) 进行以下修改，这些指令就会起作用：

在控制器中，而不是$scope.content = 'Hi';：

$scope.content = {
  value: 'Hi'
};

在模板中，将所有对content 的引用替换为content.value：

<input ng-model="content.value" type="text" />
<div parent>
  <div child ng-model="content.value">Some</div>
  </div>
<pre>model = {{content.value}}</pre>

这大致起作用的原因是，当 Angular 将对模型的引用传递给父指令（即子指令所在的那个）的嵌入范围时，这只是在引用对象属性时的引用- 否则它是一个副本，Angular 无法监视更改。

@Josep 的回答帮助很大，即使它没有提供实际的解决方案，如果您正在阅读这篇文章并且它很有用，请给它投票:)