geodeath geodeath - 1 year ago 88
AngularJS Question

Angular mdDialog controller code fails when minified

I successfully added a custom template

mdDialog
to request a name and a boolean (from a checkbox) dialog that pops up on click of an element.

However, while it works great in development, it fails on production, as the build process minifies the js code. I found many examples in SO about this issue but none of them that highlights how to fix something in my case, in most cases it is a resolve or something that is easy to grasp. My code is:

function DialogController ( $scope, $mdDialog, gsheet, name ) {
$scope.name = name;
$scope.gsheet = gsheet;

$scope.cancel = function () {
$mdDialog.cancel ();
};

$scope.create = function ( name, gsheet ) {
$mdDialog.hide ( { 'name': name, 'createSheet': gsheet ? gsheet : false } );
};
}

function openNewDataSourceDialog ( ev ) {
if ( !$rootScope.driveAuth ) {
$rootScope.$emit ( 'requestMoreAuth' );
}
else {

var confirm = $mdDialog.prompt ( {
templateUrl: "app/main/data-sources/data-sources-dialog.tmpl.html",
parent: angular.element ( document.body ),
clickOutsideToClose: true,
targetEvent: ev,
controller: DialogController,
fullscreen: false,
scope: $scope,
preserveScope: true,
locals: {
name: "",
gsheet: true
}
} );

$mdDialog.show ( confirm ).then ( function ( result ) {
//create something...
}, function () {
//dont create anything...
} );
}
};


Any ideas on what is breaking the minification here? Thanks!

Answer Source

It mostly happen when you minify also $mdDialog name. Add Dependency Injection for it.

In your case:

      var confirm = $mdDialog.prompt ( {
      templateUrl: "app/main/data-sources/data-sources-dialog.tmpl.html",
      parent: angular.element ( document.body ),
      clickOutsideToClose: true,
      targetEvent: ev,
      controller: ['$scope', '$mdDialog', 'gsheet', 'name', 
           function ($scope, $mdDialog, gsheet, name) { /* ... */}],
      fullscreen: false,
      scope: $scope,
      preserveScope: true,
      locals: {
        name: "",
        gsheet: true
      }
    } );

Or:

//...
controller: ['$scope', '$mdDialog', 'gsheet', 'name', DialogController],
//...
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download