AngularJS ng-model-options getter-setter

一尘不染

AngularJS ng-model-options getter-setter

angularjs

我刚刚升级到角度版本1.3.8。

当使用1.2.23版本时，我创建了一条指令来将数据表单视图转换为模型，反之亦然。

这是我的指令：

.directive('dateConverter', ['$filter', function ($filter) {

    return {

        require: 'ngModel',

        link: function (scope, element, attrs, ngModelController) {

            // Convert from view to model
            ngModelController.$parsers.push(function (value) {
                return $filter('date')(new Date(date), 'yyyy-MM-ddTHH:mm:ss')
            });

            // Convert from model to view
            ngModelController.$formatters.push(function (datetime) {
                return $filter('date')(datetime, 'MM/dd/yyyy');
            });
        }
    };
}]);

}）;

我在这里看到现在支持绑定中的getter和setter，但是我在任何地方
都找不到如何同时使用getter 和 setter的方法。有什么办法吗？那就是-ng-model-
options可以代替我的convert指令吗？

谢谢

阅读 236

2020-07-04

共1个答案

一尘不染

该文档可能看起来有些模糊，但是用法非常简单。你需要做什么：

HTML：
```
<input ng-model="pageModel.myGetterSetterFunc"
```
ng-model-options=” {getterSetter: true }”>
在JS控制器中，而不是实际模型中，创建一个函数，该函数将在没有发送参数的情况下返回值（+应用剥离），并且在发送参数的情况下将更新模型（+应用其他更改）。

getter / setter方法基本上是视图值和模型值之间的另一个“层”。

例：

$scope.pageModel.firstName = '';
$scope.pageModel.myGetterSetterFunc: function (value) {
  if (angular.isDefined(value)) {
    $scope.pageModel.firstName = value + '...';
  } else {        
    return $scope.pageModel.firstName.substr(0,
      $scope.pageModel.firstName.lastIndexOf('...')
    );
  }
}

DEMO PLUNKER：http
://plnkr.co/edit/Zyzg6hLMLlOBdjeW4TO0?p=preview

（检查控制台-http:
//screencast.com/t/3SlMyGnscl）

注意：有趣的是，这将在可重用性方面进行扩展。我建议将这些getter /
setter创建为可外部化的可重用方法，并为它们提供生成器（因为每种情况下的数据模型都不同）。并在控制器中仅调用那些生成器。只是我的2美分。

2020-07-04