Rolando
Rolando

Reputation: 62664

Angular minification with directive controller?

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

Upvotes: 8

Views: 3818

Answers (3)

Besim
Besim

Reputation: 1


You can use like this:

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

Upvotes: 0

PSL
PSL

Reputation: 123739

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.

Upvotes: 21

ROMANIA_engineer
ROMANIA_engineer

Reputation: 56694

Usually, the following approach is used:

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

to avoid such problems.

Upvotes: 1

Related Questions