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

Answer 2

发生这种情况是因为您在作用域上使用了基元.

ngIf 创建一个新的子范围,它会遮蔽父范围的值.

改为使用点符号:

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

从了解范围维基:

范围继承通常很简单,你通常甚至不需要知道它正在发生......直到你尝试双向数据绑定(即表单元素,ng-模型)到一个原语(例如,数字,字符串, boolean)在子范围内从父范围定义.

它不像大多数人期望的那样工作.会发生什么是子范围获取其自己的属性,该属性隐藏/隐藏同名的父属性.这不是AngularJS正在做的事情 - 这就是JavaScript原型继承的工作原理.

新的AngularJS开发人员通常没有意识到ng-repeat,ng-switch,ng-view和ng-include都会创建新的子范围,因此在涉及这些指令时经常会出现问题.

通过遵循始终具有'.'的"最佳实践",可以轻松避免与原语的这个问题.在您的ng模型中.