Angular minification with directive controller?

Question

If I have the following:

myapp.directive('directivename', ...

    return {
        ...
        restrict: 'E',
        controller: MyController,
        ...
    }

    function MyController($scope, $somethingelse) {
        // Contents of controller here
    }
);

How do I modify this such that MyController will not get destroyed when minified? I am getting the following error:

Error: [$injector:unpr] Unknown provider: eProvider <- e

Answer 1

It can be resolved by using explicit dependency annotation. What you have it implicit annotation which causes issues while minification. You could use $inject or inline array annotation to annotate the dependencies in the directive as well.

MyController.$inject = ['$scope', '$somethingelse'];

function MyController($scope, $somethingelse) {
    // Contents of controller here
}

Or in the directive:

return {
    ...
    restrict: 'E',
    controller: ['$scope', '$somethingelse', MyController],
    ...
}

Or register your controller using .controller syntax

app.controller('MyController', ['$scope', '$somethingelse', MyController]);

and set up controller name in the directive instead of the constructor.

return {
    ...
    restrict: 'E',
    controller: 'MyController',
    ...
}

You can also take a look at ng-annotate with which you don't need to use explicit annotation.

Answer 2

Usually, the following approach is used:

myapp.controller('MyController', ['$scope', '$somethingelse', function($scope, $somethingelse) {
  ...
}]);

to avoid such problems.

Answer 3

---

You can use like this:

return {
    restrict: 'EA',
    template: ...,
    scope: {},
    controller: ["$scope","$rootScope", function ($scope,$rootScope) {
       //code here
    }],
    link: function (scope) {
    }
}