Material: mdDialog not working when code is minified

Created on 23 Nov 2015  路  7Comments  路  Source: angular/material

Hi,

I'm using mdDialog in my application and it worked fine. I also use grunt uglify to minify my angular code. When this is done, the mdDialog doesn't work. It gives me the "Error: $injector:unpr" error. What dependency would be missing when minified? Any help?

Thanks.

Most helpful comment

@syedddda Seems like you are missing the injection aliases for DialogController.

DialogController.$inject = ['$scope', '$mdDialog'];

All 7 comments

double check all $injects.

I'm pretty sure I've checked it. Here is the code

    myApp.controller('headerController', [
      '$scope',
      '$location',
      '$mdDialog',
      '$firebaseAuth',
      '$firebaseObject',
      'AuthService',
      'UserDataService',
      function ($scope, $location, $mdDialog, $firebaseAuth, $firebaseObject, AuthService, UserDataService) { 
      $scope.openMenu = function ($mdOpenMenu, ev) {
          originatorEv = ev;
          $mdOpenMenu(ev);
        };
    $scope.showColorSelect = function (ev) {
          $mdDialog.show({
            controller: DialogController,
            templateUrl: '../../partials/dialogColor.tmpl.html',
            parent: angular.element(document.body),
            targetEvent: ev,
            clickOutsideToClose: true
          }).then(function (answer) {
            localStorage.themeColor = $scope.themeColor = answer;
          }, function () {
          });
        };
    }]);
    function DialogController($scope, $mdDialog) {
      $scope.hide = function () {
        $mdDialog.hide();
      };
      $scope.cancel = function () {
        $mdDialog.cancel();
      };
      $scope.answer = function (answer) {
        $mdDialog.hide(answer);
      };
    }

All other services work for me. Only mdDialog is not working. Not sure why.

@syedddda Seems like you are missing the injection aliases for DialogController.

DialogController.$inject = ['$scope', '$mdDialog'];

Yeah ! That was it !

Thanks @alexandrebrasil

@alexandrebrasil Hi, Do you know how to inject other params to DialogController, I want to pass params to DialogController like this:

$scope.showColorSelect = function (ev) {
    $mdDialog.show({
        controller: DialogController,
        templateUrl: '../../partials/dialogColor.tmpl.html',
        parent: angular.element(document.body),
        targetEvent: ev,
        clickOutsideToClose: true,
        locals: {
            MyParam: 'My Own Params Pass to Controller'
        },
    }).then(function (answer) {
        localStorage.themeColor = $scope.themeColor = answer;
    }, function () {
    });
};
}]);

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

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

DialogController.$inject = ['$scope', '$mdDialog', 'MyParam'];

Thank you

@alexandrebrasil Thank you, I have solved this question by myself

hi @alexandrebrasil , can you let me know how you solved the param issue ?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

rtprakash picture rtprakash  路  3Comments

diogodomanski picture diogodomanski  路  3Comments

PeerInfinity picture PeerInfinity  路  3Comments

LeoLozes picture LeoLozes  路  3Comments

ghost picture ghost  路  3Comments