如何在表單輸入中正確使用ng-bind（單向綁定）？

Question

我注意到，如果手動更改輸入2的值，然后更改輸入1的值，則輸入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 || ""; 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在addAttrInterpolateDirective函數（ compile.js ）中創建$observe
• 調用$observe回調時，它使用attr.$set(name, newValue) ，同樣的問題；

結論-

• 提交功能請求
• 或實現自己的ngValue指令。

Answer 2

是。 當用戶編輯input2的值時，input2的值不再是angularjs可以理解的表達式，因此不會反映對topValue的更改。

Answer 3

簡短版：綁定有效。

長版：

元素的屬性與其屬性之間存在差異。 對於input元素的屬性尤其如此。

value屬性是元素的初始值或默認值。 在input字段中鍵入內容后， value不再重要。

因此，當您使用諸如value="{{topValue}}"類的角度表達式時，只要表達式{{topValue}}發生變化，屬性的值就會發生變化。 但是，只要您更改input字段的內容，它就無關緊要。 通過設置input元素的value 屬性 ，可以手動甚至以編程方式進行。