Angularjs Controller within Directive Minification failure?

Question

I am getting strange errors with minification, I suspect it has something to do with the fact i have a controller within the directive:

var app = angular.module('myapp');

app.directive("person", ['$dialog', function($dialog) {
return {
    restrict: "E",
    templateUrl: "person/views/person.html",
    replace: true,
    scope: {
        myPerson: '='
    },     
    controller: mycontroller
};

function mycontroller($scope, $attrs) {
  $scope.variable = 1;
}
}]);

What is the proper way to refactor this so it doesn't get broken during minifaction?

angular.module('myApp').controller('mycontroller', ['$scope', '$attrs',mycontroller]); Avoid using global controllers, register them using controller constructor function and just do the explicit dependency annotation just like what you are doing with the directive. — PSL
– PSL, Commented Dec 8, 2014 at 22:14
How does that controller end up where the directive is? Not seeing the relationship with how the mycontroller would end up there as currently the controller is declared inside the app.directive("person"). — Rolando
– Rolando, Commented Dec 8, 2014 at 22:16
I missed that part, however same thing applies there too. controller:'mycontroller' or just use inline array @ your controller key's value itself ex:- controller: ['$scope', '$attrs', mycontroller]. — PSL
– PSL, Commented Dec 8, 2014 at 22:17
How to use the inline? I've done it before but not within the directive's controller. — Rolando
– Rolando, Commented Dec 8, 2014 at 22:20

PSL · Accepted Answer · 2014-12-08 22:33:27Z

1

If you want to write it like this you have to use $inject

 mycontroller.$inject = ['$scope', '$attrs'];

Reference: https://github.com/johnpapa/angularjs-styleguide#style-y075

But I would sugest you do not use these kind of "mimimization friendly" dependency injection style and look on automatization tools which will do this for you - ng-annotate (or its gulp/grunt derivate which can be used in your build.)

edited Dec 8, 2014 at 22:33

PSL

124k21 gold badges257 silver badges243 bronze badges

answered Dec 8, 2014 at 22:22

Víťa Plšek - angular.cz

1,5031 gold badge10 silver badges26 bronze badges

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

6 Comments

Rolando Over a year ago

Is ng-annotate smart enough to find cases like the one I wrote above? The one on the site appears to be basic app.controller()

PSL Over a year ago

Yeah i forgot about ng-annotate.. @Rolando However if you really want to test the controller you could prefer registering them using controller constructor.

Víťa Plšek - angular.cz Over a year ago

I would say its quite clever - From doc : github.com/olov/ng-annotate ng-annotate understands return {.., controller: function($scope) ..} inside a directive. and you can also add // @ngInject on the top of your function defininition, it will attach an $inject array to the function.

Víťa Plšek - angular.cz Over a year ago

I have added reference to Reference: github.com/johnpapa/angularjs-styleguide#style-y075 where you can se how $inject should be used in your case

PSL Over a year ago

Yeah. though i have not used, i have heard ng-annotate can be used along with ng-doc header as well.

|

Collectives™ on Stack Overflow

Angularjs Controller within Directive Minification failure?

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