angularjs - 如何通过 ng-model 指令拦截值绑定

Question

例如，

如果我有一个范围值：

$scope.bankInfo = '808,CityBank';

和一个输入字段：

<input name="bank_number" ng-model="bankInfo " />

我不知道将输入字段仅绑定到数字部分（即 808）的正确方法是什么。我应该使用自定义指令吗？

Answer 1

我发现自定义指令是拦截绑定的好方法。让我们声明一个这样的指令：

module.directive('banknumber', function () {
        return {
            require: 'ngModel',
            link: function ($scope, $element, $attrs, modelCtrl) {
                modelCtrl.$formatters.push(function (inputValue) {
                    var modelValue = modelCtrl.$modelValue;
                    var bkno = (modelValue == null) ? '' : modelValue.split(',')[0];

                    return bkno;
                });

                modelCtrl.$parsers.push(function (inputValue) {
                    var modelValue = modelCtrl.$modelValue;
                    var bankName = (modelValue == null) ? '' : modelValue.split(',')[1];

                    return modelCtrl.$viewValue + ',' + bankName;
                });
            }
        };
    });

应用于输入并完成：

<input name="bank_number" ng-model="bankInfo" banknumber/>