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 · Accepted Answer · 2015-07-22 08:26:59Z

4

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
        }]
    }
}]);

edited Jul 22, 2015 at 8:26

answered Jul 22, 2015 at 8:24

Strelok

51.7k9 gold badges106 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Complexity Over a year ago

That was exactely the answer I was looking for. Didn't know it was that simple. Thanks for that. You have to wait 10 more minutes before you are awarded SO points, cannot accept for the next 10 minutes.

TheLazyChap Over a year ago

@Complexity I would like to also add that you could pull it out to its own controller file and keep everything encapsulated but I'm not sure if this is just a simple directive or it will grow in the future. You can use the [ ] min-safe array approach or $inject if you pull it out to its own file.

Bikas Over a year ago

I suggest you to use this plugin github.com/mzgol/grunt-ng-annotate. It'll auto annotate the files.

Complexity Over a year ago

@TheLazyChap I didn't know that you can pull a directive's controller out if's directive. You mind giving a short example as I might need it in the future?

TheLazyChap Over a year ago

@Complexity I've created a plunk for you here plnkr.co/edit/l8YiIpF9k2JzMmYk3N4x?p=preview have a look and see if it make sense. I've added some comments in the directive's controller file. It should be self explanatory.

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related