角度过滤器不起作用

Question

我正在编写一个过滤器，它将在我建立的联系表单中格式化电话号码，但是由于某种原因，输入中的值永远不会更新，我不确定我做错了什么。

这是我的 HTML：

<div class='form-group'>
    <input name='phone' ng-model='home.contact.phone' placeholder='(Area code) Phone' required ng-bind='home.contact.phone | phone' />
</div>

这是我的过滤器：

(function () {
    'use strict'

    angular
        .module('Allay.phoneFilter', [])
        .filter('phone', function () {
            return function (phone) {
                if(!phone) return '';

                var res = phone + '::' // Since this isn't working, I'm doing something super simple, adding a double colon to the end of the phone number.
                return res;
            }
        });
})();

我不确定你是否需要这个，但这是控制器：

(function () {
    'use strict'

    angular
        .module('Allay', [
            'Allay.phoneFilter'
        ])
        .controller('HomeController', function () {
            var home = this;
        });
})();

如果我在过滤器中的 'return res' 之前添加一个 alert(res)，我会看到我期望的值 '123::'，但是输入中它自身的值仍然只是 123。

Answer 1

您需要创建指令来更改您的 ngModel，如下所示：

.directive('phoneFormat', function() {
     return {
         require: 'ngModel',
         link: function(scope, elem, attrs, ctrl) {

             var setvalue = function() {
                 elem.val(ctrl.$modelValue + "::");
             };

             ctrl.$parsers.push(function(v) {
                 return v.replace(/::/, '');
             })


             ctrl.$render = function() {
                 setvalue();
             }

             elem.bind('change', function() {
                 setvalue();
             })

         }
     };
 });

在html中使用：

<input name='phone' ng-model='contact.phone' placeholder='(Area code) Phone' required phone-format />

JS 小提琴：http://jsfiddle.net/57czd36L/1/

Answer 2

您应该删除您的“ng-bind”，因为您正在过滤它，并且呈现的是 ng-model 中的内容。改为使用值。

    <input name='phone' ng-model='home.contact.phone | phone' value="{{contact.phone | phone}}"  />

查看工作示例：JsFiddle

Answer 3

虽然过滤器模块是一个很好的方法，但我使用'A' 指令来完成这项繁琐的工作，因为更改元素值会影响其 ng-model。

但是，如果您的实际数据操作可以总结为 3-4 行代码，我只会建议这种解决方案；否则，需要更彻底的方法。 这是一个将删除任何非整数的示例：

(function () {
    'use strict'
    angular.module('Allay').directive('phoneValidator', function () {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                angular.element(element).on('keyup', function() {
                    element.val(element.val().replace(/[^0-9\.]/, ''));
                });
            }
        }
    });
})();

比在你的 HTML 模板中：

<input name="phone" ng-model="home.contact.phone" placeholder="(Area code) Phone" phoneValidator required/>`

Answer 4

您在输入中对ngBind 的使用并不完全正确。从文档中，

ngBind 属性告诉 Angular 将指定 HTML 元素的文本内容替换为给定表达式的值，并在该表达式的值更改时更新文本内容

您不需要替换<input> 元素的文本内容，那没有意义。您可以改为使用类似的指令扩展NgModelController 的格式化程序管道

app.directive('phoneFormat', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {
            ngModel.$formatters.push(function (value) {
                if (value)
                    return value + '::';
            });
        }
    }
});

然后，在您的 HTML 中，

<input ng-model='home.contact.phone' phone-format />

如果您想保留您编写的过滤器（用于其他用途），您实际上可以在指令中重新使用它，例如

app.directive('phoneFormat', [ '$filter', function ($filter) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {
            ngModel.$formatters.push($filter('phone'));
        }
    }
}]);

$filter('phone') 只是返回'phone' 下注册的过滤函数。这是Plunker。

---

注意，这个解决方案只有在你更改NgModelController的$modelValue时才会格式化数据，例如像

$scope.$apply('home.contact.phone = "123-456-7890"');

如果您正在寻找在用户输入时更新/格式化输入值的东西，这是一项更复杂的任务。我建议使用 angular-ui/ui-mask 之类的东西。