如何在表单输入中正确使用ng-bind（单向绑定）？

Question

我注意到如果我手动更改input2的值然后更改input1的值，输入2的值将不再更新，为什么？是否说如果用户在其中输入内容，单向绑定将在输入的形式中被打破？

    <div ng-controller="myCtrl">
        1: <input name="input1"  ng-model="topValue"/>
        2: <input name="input2"  value="{{topValue}}"/>
        topValue: <span>{{topValue}}</span>
    </div>

Answer 1

ngValue不支持 input[text]

来自ngValue docs：

  

将给定表达式绑定到 input [select] 或 input [radio] 的值，以便在选择元素时，设置该元素的ngModel到了界限值。

---

我在使用input[text]时调试了ngValue：

• 查看ngValueDirective（input.js）
• 当 input1 发生变化时，会调用$ watch回调。
• attr.$set('value',value);仅更改内部编辑器（见下文）
• 我将其替换为elm[0].value = value || "";并且有效：

---

---

var ngValueDirective = function() {
  return {
    priority: 100,
    compile: function(tpl, tplAttr) {
      if (CONSTANT_VALUE_REGEXP.test(tplAttr.ngValue)) {
        return function ngValueConstantLink(scope, elm, attr) {
          attr.$set('value', scope.$eval(attr.ngValue));
        };
      } else {
        return function ngValueLink(scope, elm, attr) {
          scope.$watch(attr.ngValue, function valueWatchAction(value) {
            //attr.$set('value', value);
            elm[0].value = value || "";
          });
        };
      }
    }
  };
};

使用value（或任何其他属性）进行插值时：

• angular在$observe函数（compile.js）
中创建addAttrInterpolateDirective
• 调用$observe回调时，它使用attr.$set(name, newValue)，同样的问题;

结论 -

• file a feature request
• 或实施您自己的ngValue指令。

Answer 2

是。当用户编辑input2的值时，input2的值不再是angularjs可以理解的表达式，因此不会反映对 topValue 的更改。

Answer 3

简短版本：绑定有效。

长版：

元素的属性与其属性之间存在差异。对于input元素的属性尤其如此。

value属性是元素的初始或默认值。只要您在input字段中输入内容，value就不再重要了。

因此，当您使用value="{{topValue}}"之类的角度表达式时，只要表达式{{topValue}}发生变化，属性的值就会发生变化。但是，只要您更改input字段的内容，它就无关紧要了。通过设置value元素的input 属性，手动或甚至以编程方式。