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 ?

Solution 1

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.

Solution 2

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 ?