Question

我有一个对象以foo的形式通过getter / setter公开2个属性（比如bar和method([value])），因此您可以通过调用{{1}来获取它们的值你可以通过调用method()来设置它们的值。

此外，此对象使method(value)和foo保持同步，使其bar始终比bar大1。这意味着无论何时设置foo的值，它都会在内部更新foo的值，反之亦然。

这是示例实现：

bar

现在我有两个function obj() { var foo = 1; var bar = 2; return { foo: function (value) { if (value) { foo = value; bar = foo + 1; } return foo; }, bar: function (value) { if (value) { bar = value; foo = bar - 1; } return bar; } } }个元素，每个属性都有一个。

input

请记住// in my controller $scope.myobj = obj();  <input my-directive ng-model="myobj.foo"> <input my-directive ng-model="myobj.bar">和foo是函数，所以我写一个bar来通过调用getter获取值;和$formatter通过调用setter来设置值，如下所示：

$parser

您可以查看jsFiddle或Plunker中的示例。

正如您所看到的，格式化程序/解析器的工作正常，但问题是内部修改的属性的.directive('myDirective', function () { return { require: 'ngModel', link: function ($scope, $element, $attrs, ngModel) { ngModel.$formatters.push(function (modelValue) { return modelValue(); }); ngModel.$parsers.push(function (viewValue) { ngModel.$modelValue(viewValue); return ngModel.$modelValue; }); } }; });值（如果您更改<input>，请说bar }）未更新。

我甚至无法理解为什么在地球上不起作用。正如您在示例中所看到的，在每个输入下面我插入相同的值，在任何更改时看起来都是完全更新的。 为什么ng-model没有更新我的foo值？

Answer 1

这是你可以做到的一种方式：

http://plnkr.co/edit/7HCpSb?p=preview

（看起来有点像hacky，我不太喜欢我的解决方案。）

正如@Brandon指出的那样，你正在观看吸气功能。函数评估可以给出不同的值，但函数定义永远不会改变您的示例，因此格式化程序永远不会在您的指令中触发。

在我的例子中，我正在看evaluation of the getter function，所以只要内部价值发生变化就会触发。我避免使用ngModel，因为它看起来不合适。

在模板中：

<input my-directive accessor="myobj.foo">

在指令链接函数中：

$scope.$watch( $attrs.accessor + '()', function( v ) {
  if ( v ) $element[0].value = v;
});

Answer 2

我可以通过编写除ng-model之外的另一个指令来获取getter / setter场景，以指定get-model和ng-model绑定的setter。参见：

https://stackoverflow.com/a/21290588/738808

使用此问题中描述的ng-model-getter和ng-model-setter指令，您只需在html中继续这样做：

<input my-directive ng-model="$foo" ng-model-getter="myobj.foo()" ng-model-setter="myobj.foo($value)">
<input my-directive ng-model="$bar" ng-model-getter="myobj.bar()" ng-model-setter="myobj.bar($value)">

如何在此getter / setter场景上实现ng-model绑定？

2 个答案: