AngularJS指令经Gulp压缩JS后抛出[$injector:unpr]未知提供者错误求助

你遇到的错误是Angular依赖注入在代码压缩后的典型问题：Gulp的压缩工具（比如UglifyJS）会把函数参数名（像$filter、$browser）压缩成短变量名（比如e），而Angular默认通过参数名称匹配依赖服务，压缩后参数名被修改，Angular找不到对应的服务提供者，就会抛出Unknown provider错误。

解决方法是使用数组式依赖注入语法，把需要注入的服务名称以字符串形式提前声明——压缩工具不会修改字符串内容，Angular就能正确识别依赖。

修改后的phoneInput指令 #

careApp.directive('phoneInput', ['$filter', '$browser', function ($filter, $browser) {
    return {
        require: 'ngModel',
        link: function ($scope, $element, $attrs, ngModelCtrl) {
            var listener = function () {
                var value = $element.val().replace(/[^0-9]/g, '');
                $element.val($filter('tel')(value, false));
            };

            // 文本框更新时触发
            ngModelCtrl.$parsers.push(function (viewValue) {
                return viewValue.replace(/[^0-9]/g, '').slice(0, 10);
            });

            // 作用域中模型直接更新时，同步视图
            ngModelCtrl.$render = function () {
                $element.val($filter('tel')(ngModelCtrl.$viewValue, false));
            };

            $element.bind('change', listener);

            $element.bind('keydown', function (event) {
                var key = event.keyCode;
                // 特殊按键（CTRL/SHIFT/ALT/方向键等）不处理，支持复制粘贴
                if (key == 91 || (15 < key && key < 19) || (37 <= key && key <= 40)) {
                    return;
                }
                $browser.defer(listener); // 延迟执行确保变更被正确捕获
            });

            $element.bind('paste cut', function () {
                $browser.defer(listener);
            });
        }

    };
}]);

修改后的tel过滤器 #

虽然当前过滤器没有依赖其他服务，但为了统一规范（后续添加依赖时无需修改写法），建议也使用数组式语法：

careApp.filter('tel', [function () {
    return function (tel) {
        if (!tel) { return ''; }

        var value = tel.toString().trim().replace(/^\+/, '');

        if (value.match(/[^0-9]/)) {
            return tel;
        }

        var city, number;

        switch (value.length) {
            case 1:
            case 2:
            case 3:
                city = value;
                break;

            default:
                city = value.slice(0, 3);
                number = value.slice(3);
        }

        if (number) {
            if (number.length > 3) {
                number = number.slice(0, 3) + '-' + number.slice(3, 7);
            }
            return ("(" + city + ") " + number).trim();
        }
        else {
            return city;
        }

    };
}]);

内容的提问来源于stack exchange，提问作者Alex