AngularJS : minification issue in directive

Question

I have yet another issue with minification. This time it's because of the $scope service passed to the directive's controller. See below code:

angular.module('person.directives').
directive("person", ['$dialog', function($dialog) {
return {
    restrict: "E",
    templateUrl: "person/views/person.html",
    replace: true,
    scope: {
        myPerson: '='
    },     
    controller: function ($scope)
    {                   
        $scope.test = 3;                   
    }
}
}]);

If I comment out the controller part, then it works fine.

As you can see, I've used the array declaration for the directive, so the $dialog service is known to Angular even after minification. But how am I supposed to do it for the $scope service on the controller ?

pkozlowski.opensource · Accepted Answer · 2013-04-17 09:02:45Z

75

You need to declare a controller as follows:

controller: ['$scope', function ($scope)
    {                   
        $scope.test = 3;                   
    }]

Full example here:

angular.module('person.directives').
directive("person", ['$dialog', function($dialog) {
return {
    restrict: "E",
    templateUrl: "person/views/person.html",
    replace: true,
    scope: {
        myPerson: '='
    },     
    controller: ['$scope', function ($scope)
    {                   
        $scope.test = 3;                   
    }]
}
}]);

A solution provided by @Sam would work to but it would mean exposing directive's controller to the whole application which is unnecessary.

answered Apr 17, 2013 at 9:02

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

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

5 Comments

Sam Over a year ago

that's the solution provided by me :) Sam = OP ;-) However I'm not exposing the controller to the whole application, just to the whole module that the directive belongs to. I like your approach though, I'll go for that.

pkozlowski.opensource Over a year ago

Actually exposing it to one AngularJS module would mean that any AngularJS module would have access to it - this is what I've meant by exposing it to the whole application.

Sam Over a year ago

AngularJS modules would have access to the person.controllers module only if they depend on it. If they don't have that dependency, they should not be able to access it. Isn't that right ?

pkozlowski.opensource Over a year ago

Nope, in the current version of AngularJS those controllers would be available globally, in the whole application.

error505 Over a year ago

Great solution to wrap it like this... Thanks for this.

Sam · Accepted Answer · 2013-04-17 08:47:17Z

1

ok, I ended up creating the controller in a separate file :

angular.module('person.controllers').controller('personCtrl', ['$scope', function ($scope) {
$scope.test = 3;
}]);

then in the directive, I assign the controller by name:

controller: 'personCtrl'

Not sure it's the best way. It looks clean though. What do you think ?

answered Apr 17, 2013 at 8:47

Sam

14.7k33 gold badges114 silver badges204 bronze badges

1 Comment

pkozlowski.opensource Over a year ago

This would work to but it would mean exposing directive's controller to the whole application which is unnecessary.

Collectives™ on Stack Overflow

AngularJS : minification issue in directive

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related