AngularJS ng-model-options getter-setter [英] AngularJS ng-model-options getter-setter

问题描述

我刚刚升级到 Angular 版本 1.3.8.

I've just upgrade to angular version 1.3.8.

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

When using 1.2.23 version I've created a directive to convert the data form view to model and vice verse.

这是我的指令:

.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现在支持绑定，但我找不到如何使用both getter 和 setter 的方法.有什么办法吗?也就是说 - ng-model-options 可以代替我的转换指令吗?

I see here that getters and setters in binding are now supported, but I cannot find anywhere how to use both getters and setters. Is there any way to do it? That is - can ng-model-options replace my convert directive?

谢谢

推荐答案

文档可能看起来有点模糊，但用法很简单.您需要做的:

The documentation might seem a bit fuzzy but the usage is quite simple. What you need to do:

1. HTML:

1. HTML:

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

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

in JS controller, instead of the actual model, create a function that will return the value (+ apply stripping) if the there is no parameter sent and that will update the model (+ apply other changes) if a parameter is sent.

getter/setter 基本上是视图值和模型值之间的另一个层".

The getter/setters is basically another "layer" between the view value and model value.

示例:

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

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

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

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

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

NOTE: It would be interesting to see how would this scale in terms of reusability. I would advise to create these getter/setters as externalized reusable methods and have generators for them (because the data model is different for each case). And in controllers to only call those generators. Just my 2 cents.

这篇关于AngularJS ng-model-options getter-setter的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！