如何在 AngularJS 中将 ng-model 双向绑定与函数一起使用？

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>

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

错误：[ngModel:nonassign] 表达式 'product.get('name')' 是 不可转让。元素：<input type="text" ng-model="product.get('name')" class="ng-pristine ng-untouched ng-valid">

很明显，这是因为 Angular 想要绑定一个变量，但我却试图绑定一个函数调用。

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

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