Unknown provider: eProvider <- e when showing material angular dialog

Question

I'm trying to get material angular's dialog wired up. Code below. I get error, Unknown provider: eProvider <- e.

Js

var app = angular.module('app', ['ngMaterial']);

var dialogController = app.controller('dialogController', ['$scope', '$mdDialog', function($scope, $mdDialog) {
    $scope.hide = function () {
        $mdDialog.hide();
    };
    $scope.cancel = function () {
        $mdDialog.cancel();
    };
    $scope.answer = function (answer) {
        $mdDialog.hide(answer);
    };
}]);

app.controller('mainController', ['$scope', '$http', '$mdDialog', function ($scope, $http, $mdDialog) {
    $scope.showDialog = function (e) {
        e.preventDefault();
        $mdDialog.show({
            controller: dialogController,
            templateUrl: 'sign-in.html',
            targetEvent: e
        });
    };
}]);

Html

<a href="#" ng-click="showDialog($event)">Show dialog</a>

<script type="text/ng-template" id="sign-in.html">
    hello there
</script>

Am I missing anything?

nitin · Accepted Answer · 2016-01-19T10:53:07.520

2

var app = angular.module('app', ['ngMaterial']);

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

app.controller('mainController', ['$scope', '$http', '$mdDialog', function ($scope, $http, $mdDialog) {
    $scope.showDialog = function (e) {

      $mdDialog.show({
         controller: dialogController,
         templateUrl: 'sign-in.html',
         targetEvent: e
      });
   };
}]);

HTML call it like this :

 <md-button class="md-primary" ng-click="showDialog($event)">Show dialog</md-button>

edited Jan 19 '16 at 10:53

answered Mar 21 '15 at 13:45

nitin

3,747
2
24
31

I get "Cannot read property 'getBoundingClientRect' of undefined" and "Uncaught TypeError: Cannot read property 'hasAttribute' of undefined". I'm not sure what I'm doing wrong. – Ian Davis Mar 21 '15 at 15:05
Whoops, I was just doing a Show dialog and _not_ doing the . This fixed it, thanks so much! – Ian Davis Mar 21 '15 at 15:11
The dialog is showing up, but I'm still getting "Uncaught TypeError: Cannot read property 'hasAttribute' of undefined". Maybe b/c my template contents are missing something, I wonder? – Ian Davis Mar 21 '15 at 15:15
I copy/pasted the example from the custom dialog template on angular material website, and that did the trick. I had to add in showDialog($event) in my html. If you can update your answer to have that $event, I'll mark as correct! https://material.angularjs.org/#/demo/material.components.dialog – Ian Davis Mar 21 '15 at 15:21
You can't do a href & ng-click at the same time. And i have updated html with showDialog($event) – nitin Mar 21 '15 at 17:49
What's with the random ']' with no '[' in dialogController? – Laser Jan 17 '16 at 21:08
@Laser : those are for safe minification. Annotating the function with the names of the dependencies as strings makes sure that these are not minified. Read more here http://stackoverflow.com/questions/18782324/angularjs-minify-best-practice – nitin Jan 18 '16 at 05:45
@nitin is it not a typo to have a closing bracket ']' with no opening bracket '[' though? As it's not clear where the opening bracket would go, and it seems that the controller may need this syntax but not functions? – Laser Jan 18 '16 at 22:53

Hieu TB · Answer 2 · 2015-03-22T06:23:35.463

0

Try to add single quotes to the controller name:

$mdDialog.show({
    controller: 'dialogController',
    templateUrl: 'sign-in.html',
    targetEvent: e
});

Edit: I have one thing to update, I know why the error "'getBoundingClientRect' of undefined" happens. You have to use this script as template:

<script type="text/ng-template" id="sign-in.html">
    <md-dialog> 
        <md-content>Hello there</md-content> 
    </md-dialog>    
</script>

And btw, my answer about the single quotes should work at the first time. Try it again with this new template.

edited Mar 22 '15 at 06:23

answered Mar 21 '15 at 01:53

Hieu TB

162
5

Unfortunately, that gives me Cannot read property 'getBoundingClientRect' of undefined. – Ian Davis Mar 21 '15 at 01:57
Then please check if "locals" attribute is need, and provided it properly. Because I find a similar error in this example, when I remove the "locals" : http://codepen.io/ThomasBurleson/pen/qEBJME – Hieu TB Mar 21 '15 at 02:08
After providing locals: {} I get Argument 'fn' is not a function, got Object – Ian Davis Mar 21 '15 at 12:51
sorry, now I see _locals_ with empty object is unnecessary. About the "getBoundingClientRect" error, please check my update. – Hieu TB Mar 22 '15 at 06:25

Unknown provider: eProvider <- e when showing material angular dialog

2 Answers2