4

我有一个对象通过 getter/setter 以 的形式公开 2 个属性（比如foo和） ，因此您可以通过调用来获取它们的值，并且可以通过调用来设置它们的值。barmethod([value])method()method(value)

此外，该对象保持foo并bar同步，其方式bar始终为 1 大于foo)。这意味着每当您设置 的值时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">

请记住fooandbar是函数，所以我写了一个$formatter通过调用 getter 来获取值；和 a$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>价值？

4

2 回答 2

4

这是您可以做到的一种方法：

http://plnkr.co/edit/7HCpSb?p=preview

（它看起来有点老套，不过我不太喜欢我的解决方案。）

正如@Brandon 指出的那样，您正在观看 getter 函数。函数评估可能会给出不同的值，但函数定义在您的示例中永远不会改变，因此格式化程序永远不会在您的指令中触发。

在我的示例中，我正在观看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-30T08:38:40.907 回答
0

我可以通过编写除 ng-model 之外的另一个指令来指定 getter/setter 方案来工作，以指定 ng-model 绑定的 getter 和 setter。看：

https://stackoverflow.com/a/21290588/738808

使用此问题中描述的 ng-model-getter 和 ng-model-setter 指令，您只需在 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-22T18:39:11.940 回答