javascript - grunt uglify 后 Angularjs 注入(inject)器错误

Question

我正在努力丑化我的 angularjs 项目。我在丑化过程后遇到问题。以下功能不起作用。

app.factory('Showmenusheet', function($rootScope){
return {

    //Custom pop up sheet for activities completed notification
    openNativePopup: function(imageUrl, title, para, buttonText, buttonLink){   

        $('#popupTitle').html(title);
        $('#popupPara').html(para);
        $('#popupButton').html(buttonText);

        var imageElement = angular.element(document.querySelector('#popupImage'));
        var goToButton = angular.element(document.querySelector('#goToButton'));
        var closeButton = angular.element(document.querySelector('#closeButton'));

        goToButton.removeAttr("ng-show");
        closeButton.removeAttr("ng-show");  
        goToButton.removeAttr("go-click");      

        if(buttonLink == false) {
            goToButton.attr("ng-show", false);
            closeButton.attr("ng-show", true);
            $('#closeButton').html(buttonText);
        } else {
            goToButton.attr("ng-show", true);
            goToButton.attr("go-click", buttonLink);
            closeButton.attr("ng-show", false);
            $('#goToButton').html(buttonText);
        }


        imageElement.attr("src", 'assets/images/app_icons/'+imageUrl);
        compile(goToButton);
        compile(closeButton);
        compile(imageElement);

        setTimeout(function(){$('#nativePopup').addClass("showNativePopup");},350);
        setTimeout(function(){$('#deletemenu').addClass('delete-menu-active');},0);

    }
}
});

这是我在控制台中收到的错误。

所以基本上，如果我不丑化代码，弹出功能可以正常工作，没有任何问题，但是在丑化之后，我收到上面屏幕截图中的错误。我在上述函数中做错了什么不符合标准吗？

<小时/>

编辑添加各种控制台日志测试后，我发现控件在 compile() 函数中显示错误。我希望编译函数在每次从 AngularJS 调用“openNativePopup”函数时更新 HTML。可以使用什么替代方法来代替compile()？

Answer 1

通常，AngularJS 错误的缩小错误是由于缺少依赖项注入(inject)使用的完整注释而导致的。

这样想，假设我们有一项服务

angular
.module('MyModule', [])
.service('myService', function($rootScope) {
  $rootScope.title = 'my title'; 
});

Angular 将 $rootScope 注入(inject)到您的函数中。

每当这段代码经过缩小时，它就会变成这样

angular
.module('MyModule', [])
.service('myService', function(a) {
  a.title = 'my title';
});

这使得 AngularJS 依赖注入(inject)机制抛出异常，因为没有这样的 a 注册到 Angular。

为了解决这个问题，有$inject Property Annotation .

因此，为了支持缩小，代码应该如下所示。

angular
.module('MyModule', [])
.service('myService', ['$rootScope', function($rootScope) {
  $rootScope.title = 'my title';
}]);

有一个工具可以执行此操作 annotation automatically