AngularJS 指令在缩小时失败

Question

我在 Visual Studio 中使用了一个压缩插件，除了这一段 AngularJS 代码外，它大部分都可以工作

这是未缩小的代码：

var svgBuildInterface = angular.module("svgBuildInterface", []);

svgBuildInterface.directive('ngRightClick', function ($parse) {
    return function (scope, element, attrs) {
        var fn = $parse(attrs.ngRightClick);
        element.bind('contextmenu', function (event) {
            scope.$apply(function () {
                event.preventDefault();
                fn(scope, { $event: event });
            });
        });
    };
});

这是失败的漂亮打印的缩小代码：

svgBuildInterface = angular.module("svgBuildInterface", []);
svgBuildInterface.directive("ngRightClick", function(n) {
    return function(t, i, r) {
        var u = n(r.ngRightClick);
        i.bind("contextmenu", function(n) {
            t.$apply(function() {
                n.preventDefault();
                u(t, {
                    $event: n
                })
            })
        })
    }
});

我无法在缩小后的代码中设置断点来找出发生了什么，但是 angularJS 会抛出异常：

Error: [$injector:unpr] http://errors.angularjs.org/1.5.7/
$injector/unpr?p0=nProvider%20%3C-%20n%20%3C-%20ngRightClickDirective

Answer 1

像下面这样更改你的指令，当你想缩小你的 JS 时，在编写控制器或指令或 Angular js 的任何组件时需要遵循某些最佳实践。

其中之一是通过 [] 传递依赖注入

var svgBuildInterface = angular.module("svgBuildInterface", []);

svgBuildInterface.directive('ngRightClick',['$parse', function ($parse) {
    return function (scope, element, attrs) {
        var fn = $parse(attrs.ngRightClick);
        element.bind('contextmenu', function (event) {
            scope.$apply(function () {
                event.preventDefault();
                fn(scope, { $event: event });
            });
        });
    };
}]);