How to prevent grunt-uglify to mess with angularJS scope value in directive

Question

I've written a fairly simple directive that can change the stylesheet on a page dynamically.

Here's a snippet of the directive:

OfficeSuiteModule.directive('officeButton', ['$q', 'stylesheetInjectorService', function($q, stylesheetInjectorService) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            isDisabled: '@?',
            label: '@?',
            api: '='
        },
        template: OFFICE_BUTTON_TEMPLATE,

        // Defines the controller for the 'officeButton' directive.
        controller: function($scope) { }
    }
}]);

Now, I'm using grunt to build my project and I'm using the task grunt-contrib-uglify to minifies the JavaScript files, however I'm facing an issue here.

If I look at the minified version of the JavaScript file, the controller inside my directive's signature is changed to: controller: function(c) {}

Off couse this would not work bcause c is not defined. It would raise an AngularJS error. Is there an Angular way to resolve this, or can I instruct the grunt-contrib-uglify task not to change this parameter?

Kind regards

Strelok Strelok · Accepted Answer · 2015-07-22T08:24:14

You have to annotate the controller function too:

controller: ['$scope', function($scope) {
        // your function
}]

So your full code becomes:

OfficeSuiteModule.directive('officeButton', ['$q', 'stylesheetInjectorService', function($q, stylesheetInjectorService) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            isDisabled: '@?',
            label: '@?',
            api: '='
        },
        template: OFFICE_BUTTON_TEMPLATE,

        // Defines the controller for the 'officeButton' directive.
        controller: ['$scope', function($scope) {
            // your function
        }]
    }
}]);

How to prevent grunt-uglify to mess with angularJS scope value in directive

1 Answers