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

我有一个对象暴露在method([value])形式通过getter/setter方法2种属性（比如foo和bar），这样你就可以通过调用method()得到他们的价值，你可以通过调用method(value)设定自己的价值。如何在此getter/setter方案上实现ng-model绑定？

而且，该对象保持foo和bar同步，使bar总是比foo大1。这意味着无论您何时设置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(); 

<!-- in the HTML --> 
<input my-directive ng-model="myobj.foo"> 
<input my-directive ng-model="myobj.bar">

请记住，foo和bar是函数，所以我写了$formatter通过调用吸气来获取值;和$parser通过调用setter方法，这样设置的值：

.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; 
      }); 
     } 
    }; 
});

可以在jsFiddle或Plunker检查例子。

正如你所看到的，格式化/分析器事情的作品就好了，但问题是，物业的<input>值是内部修改（比如bar如果你改变foo）不更新。

我甚至无法理解为什么地球不起作用。正如您在示例中所看到的，在每个输入下面，我将插入相同的值，该值在任何更改后都会完美更新。 为什么ng-model没有更新我的<input>值？

来源

2013-05-30 luisfarzati

'$ formatters'在模型值发生变化时运行“。我的猜测是'$ modelValue'永远不会改变 - 它仍然是对'foo（）'或'bar（）'的静态常量引用。你*调用函数来改变一些数据的内部表示，但ngModel所附带的东西永远不会改变。 DOM更新是因为对'foo（）'和'bar（）'的绑定 - 这些函数调用的*结果*会更新。 –

感谢布兰登的信息！ – luisfarzati

这是一种方式，你可以这样做：

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

（它看起来有种哈克，我不喜欢我的解决方案非常多，虽然）。

由于@Brandon指出，你正在看吸气剂功能。函数评估可能会给出不同的值，但函数定义在您的示例中永远不会更改，因此formatter不会在您的指令中触发。

在我的示例中，我正在观察evaluation of the getter function, ，因此只要内部值发生变化就会触发。我避免使用ngModel，因为它看起来不适合这种方式。

模板

：

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

在向链路功能

：

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

来源

2013-05-30 08:38:40 Tosh

谢谢托斯！ – luisfarzati

我能得到一个getter/setter方法的情况通过编码另一个指令除了NG-模型用于指定工作getter和ng-model绑定的setter。请参阅：

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

使用在这个问题上所描述的NG-模型getter和NG-模型制定者的指令，你只需继续这样在你的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)">

来源

2014-01-22 18:39:11 sboisse

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

回答

相关问题