javascript - 如何在 AngularJS 中使用 ng-model 双向绑定(bind)函数？

Question

因此，我为我的 Angular 应用想出了这种出色的数据模型方法，它让我可以做这样奇特的事情:

var product = productModel.create();
product.set('name', 'Widget');
product.set('price', 12.99);
product.set('quantity', 46);
product.save().success(function() {
    alert('It saved!');
});

但后来我意识到......这不适用于 ng-model :(

<form>
    <div>
        <label>Name</label>
        <input type="text" ng-model="product.get('name')" />
    </div>
    <div>
        <label>Quantity</label>
        <input type="text" ng-model="product.get('quantity')" />
    </div>
    <div>
        <label>Price</label>
        <input type="text" ng-model="product.get('price')" />
    </div>

    <input type="submit" value="Save" />
</form>

当我在输入字段中键入文本时，我得到了这个

Error: [ngModel:nonassign] Expression 'product.get('name')' is non-assignable. Element: <input type="text" ng-model="product.get('name')" class="ng-pristine ng-untouched ng-valid">

显然，发生这种情况是因为 Angular 想要绑定(bind)一个变量，但我试图绑定(bind)一个函数调用。

我真的很想保留这种使用 get() 和 set() 的模型方法。我怎样才能使它与 ng-model 一起工作并且仍然具有双向绑定(bind)？一定有办法...

Answer 1

//when creating the {get: ..., set: ...} object, also add this method:
product.bind = function(key) {
  var obj = this
  return function(val) {
    if (angular.isDefined(val)) {
      obj.set(key, val)
    }
    return obj.get(key)
  }
}

然后在 HTML 中:

<form ng-model-options="{getterSetter: true}">
  <input ng-model="product.bind('name')">
</form>

参见 http://plnkr.co/edit/1GyWhswyO43R6nm49hHP?p=preview