如何在此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綁定？

回答

相關問題