How to eliminate minification errors when using $controller in AngularJS

Question

angular.module('mainApp').
  controller('dynamicRouteController', ['$scope', '$controller', '$routeParams', function($scope, $controller, $routeParams) {
    if(/^\d+$/.test($routeParams.pageOrName)) {
      $scope.controller = $controller('thisController', { $scope: $scope }).constructor;
      $scope.templateUrl = '/www/thisPage';
    } else {
      $scope.controller = $controller('thatController', { $scope: $scope }).constructor;
      $scope.templateUrl = '/www/thatPage';
    }
  }]);

this minifies to:

"use strict";
angular.module("mainApp").
controller("dynamicRouteController",["$scope",‌"$controller","$routeParams",function(a,b,c){
/^\d+$/.test(c.pageOrName)?
(a.contro‌ller=b("thisController",{$scope:a}).constructor,a.templateUrl="/www/thisPage"):
(a‌.controller=b("thatController",{$scope:a}).constructor,a.templateUrl="/www/thatPa‌ge")
}])

This is having issues minifying, I think its because of the {$scope : $scope} being altered... First time I have run into this/used this method. Anyone know a better way to write this so it minifies correctly?

EDIT: so whats happening, is that it is passing the {$scope: a} which is fine, but on that referenced controller, when its minified, that $scope has become a or b or e depending... so if I write the code "pre-minified", meaning I literally find what letter represents $scope in the other controller, I can get it to work, but thats so hacky! Again, any ideas?

Using Grunt for minification Angular 1.0.5 ... maybe fixed in later versions?

2nd EDIT: A decent answer is to throw both controllers into the same file, explicitly... which is ugly... but it works! so with in one controller, I am declaring 2 sub controllers, which is lame. If you know of another way please share with the class!

There's a comment on the $controller doco that has {$scope: {}}. Give that a try — Phil
– Phil, Commented Aug 8, 2013 at 23:23
Just another wild guess var scope = $scope; then $controller('thatController', { $scope: scope }).constructor; Similar to how one would achieve the same end when testing a controller. Although when testing you tend to use var scope = $rootScope.$new(); — Jonathan Palumbo
– Jonathan Palumbo, Commented Aug 8, 2013 at 23:39
Could you provided the code after it is minified? Perhaps that would provide some insight? — Jonathan Palumbo
– Jonathan Palumbo, Commented Aug 9, 2013 at 0:03

Community · Accepted Answer · 2017-05-23 12:20:23Z

3

I was working on this issue with @mclenithan and what we came up with is:

$scope.controller = ['$scope', 'service1', 'service2', 
    $controller('thisController', { $scope: $scope }).constructor];

The main issue was the controllers thisController and thatController had more parameters to inject than just $scope (in this example it expects service1 and service2).

The $controller(...).constructor was returning the minified controller function with the parameters renamed to a, b, c, d, etc. When Angular was trying to instantiate the controller it had issues trying to find the correct services to inject.

Using the array notation instead of just the controller function fixed the issue. See a note on minification in the tutorial for more info.

Also see this question for context on what we were trying to do to begin with.

edited May 23, 2017 at 12:20

CommunityBot

11 silver badge

answered Aug 9, 2013 at 17:22

Gloopy

37.8k15 gold badges105 silver badges73 bronze badges

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

Collectives™ on Stack Overflow

How to eliminate minification errors when using $controller in AngularJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related