Question

我有一个用例，我需要动态地将指令添加到输入字段，具体取决于数据库中的配置。这一切似乎都运行良好，但这些输入字段有一些奇怪的怪癖。我发现奇怪的行为是由我希望它们调用解析器时调用格式化程序的指令引起的。

我做了一个掠夺者来证明这种行为。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    $scope.test1 = 'World1';
    $scope.test2 = 'World2';
});

app.directive('test', ['$log', function($log) {
    return {
        require : 'ngModel',
        link : function(scope, elm, attrs, ctrl) {
            function parse(viewValue) {
                console.log('parsing', viewValue);
                return viewValue;
            }

            function format(viewValue) {
                console.log('formatting', viewValue);
                return viewValue;
            }

        ctrl.$formatters.unshift(format);
        ctrl.$parsers.unshift(parse);
        }
    };
}]);

app.directive('variabele', ['$compile', function($compile) {
    return {
        restrict : 'E',
        template : '<div><input ng-model="ngModel" /></div>',

        scope : {
            ngModel : '='
        },
        require: ['ngModel'],

        link: function(scope, elm, attrs, ctrl) {
            console.log('testing');
            var input = angular.element(elm.find("input"));
            input.attr('test', '');

            $compile(input)(scope);
        }
    };
}]);

plunker

与我所说明的问题有点简化。有两个输入字段。其中一个总是有测试指令。另一个有变量指令，后者又动态地添加测试指令。

实际上，添加了一个或多个在数据库中定义的指令。当您更改第一个输入字段的值时，您可以在控制台中看到调用解析器，但是当您更改第二个输入字段的值时，您会看到正在调用格式化程序。我不确定我在这里做错了什么。

编辑：原来的炮手坏了，所以我修好了。现在，它们为每个输入字段使用不同的模型，第二个输入字段正确使用varbele指令。

Answer 1

这是预期的行为，

格式化程序会更改模型值在视图中的显示方式。
解析器会更改视图值在模型中的保存方式。

在您的情况下，您在指令test和variabele中绑定相同的值。当您在测试指令中更改值时，会调用解析器（view - ＆gt; model），而在varbele中，调用另一种方式（model - ＆gt; view）格式化程序。

了解更多信息：How to do two-way filtering in angular.js?

动态添加的指令调用formatter而不是parser

1 个答案: