AngularJS ng-model-options getter-setter

Question

我刚刚升级到 Angular 版本 1.3.8。

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

这是我的指令:

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

});

我看到了here现在支持绑定(bind)中的 getter 和 setter，但我在任何地方都找不到如何使用 两个 setter/getter 和 二传手。有什么办法吗？也就是说 - ng-model-options 可以替换我的转换指令吗？

谢谢

Answer 1

文档可能看起来有点模糊，但用法很简单。
你需要做什么:

HTML:

<input ng-model="pageModel.myGetterSetterFunc"
ng-model-options=" {getterSetter: true }">

在 JS Controller 中，而不是实际模型，创建一个函数，如果没有发送参数，它将返回值(+应用剥离)，如果发送参数，它将更新模型(+应用其他更改)。

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

例子:

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

演示柱塞:
http://plnkr.co/edit/Zyzg6hLMLlOBdjeW4TO0?p=preview

(检查控制台 - http://screencast.com/t/3SlMyGnscl)

注意:看看这在可重用性方面将如何扩展会很有趣。我建议将这些 getter/setter 创建为外部化的可重用方法，并为它们配备生成器(因为每种情况下的数据模型都不同)。在 Controller 中只调用那些生成器。只是我的2美分。