AngularJS 模型选项 getter-setter

Question

我刚刚升级到 angular 版本 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');
            });
        }
    };
}]);

});

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

谢谢

Answer 1

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

HTML:

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

在 JS 控制器中，而不是实际模型，创建一个函数，如果没有发送参数，它将 return 值（+ 应用剥离）并且将更新模型（+应用其他更改）如果发送参数。

getter/setters基本上是视图值和模型值之间的另一个"layer"。

示例：

$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/setters 创建为外部化的可重用方法，并为它们创建生成器（因为每种情况下的数据模型都不同）。在控制器中只调用那些生成器。只是我的 2 美分。

Answer 2

这个问题相当陈旧 - 但对于 IE9+（当然还有所有其他相关浏览器），您可以使用 ECMAScript 5 getter/setter 方法，我更喜欢 ng-model 的 getterSetter 选项：

var person = {
    firstName: 'Jimmy',
    lastName: 'Smith',
    get fullName() {
        return this.firstName + ' ' + this.lastName;
    },
    set fullName (name) {
        var words = name.toString().split(' ');
        this.firstName = words[0] || '';
        this.lastName = words[1] || '';
    }
}

person.fullName = 'Jack Franklin';
console.log(person.firstName); // Jack
console.log(person.lastName) // Franklin

这个例子来自http://javascriptplayground.com/blog/2013/12/es5-getters-setters/

AngularJS 模型选项 getter-setter

AngularJS ng-model-options getter-setter

getter-setter

angularjs