ngIf中的绑定元素不会更新绑定

Question

我已经编写了angularjs指令。在该指令的模板中，我添加了一个ngIf指令，并在其中显示绑定到指令范围的输入。

<div ng-if="bool"><input ng-model="foo"></div>

经过大量的反复试验，我注意到ngIf指令导致更改输入文本时模型无法更新。如果我将其更改为ngShow，则一切正常。

我正在寻找这种差异的解释

我在这里创建了一个jsfiddle

Answer 1

之所以会这样，是因为ngIf创建了一个新的子作用域，因此，如果您想绑定到与其他输入相同的作用域，我们可以使用$
parent向下一级。单击此处了解有关范围继承的更多信息

  angular.module('testApp', [])
  .directive('testDir', function () {
    return {
      restrict: 'A',
      template: '<input ng-model="foo"><input ng-model="foo">' +
         '<div ng-if="bool"><input ng-model="$parent.foo"></div>',
      link: function (scope, elem, attrs) {
        scope.foo = "bar";
        scope.bool = true;       
      }
    }
  });

看看新的jsfiddle