CODEWITHSUNDEEP
javascripthtmlangularjsionic-framework
Hana
Hana

Reputation: 239

DialogProvider error while generating a dialog angularjs

I am trying to create a mobile app where a dialog is opened after clicking on an image.

Here it is what I have done so far:

HTML:

        <ion-content ng-controller="cityController">
<div class="container" id="popupContainer">
    <div class="row">
            <div class="col col-33">
                    <img  src="img/images/opera.jpg" ng-click="showTabDialog($event)"/>
              <div class="description" style="font-size: 8pt">Opera de Lyon</div>
         </div>

JS:

angular.module('starter.cityController', ['ionic', 'ngDialog'])
.controller('cityController', function ($scope, $mdDialog, $mdMedia){
   $scope.status = '  ';
  $scope.customFullscreen = $mdMedia('xs') || $mdMedia('sm');

  $scope.showTabDialog = function(ev) {
    $mdDialog.show({
      controller: DialogController,
      templateUrl: 'tabDialog.tmpl.html',
      parent: angular.element(document.body),
      targetEvent: ev,
      clickOutsideToClose:true
    })
        .then(function(answer) {
          $scope.status = 'You said the information was "' + answer + '".';
        }, function() {
          $scope.status = 'You cancelled the dialog.';
        });
  };
});
function DialogController($scope, $mdDialog) {
  $scope.hide = function() {
    $mdDialog.hide();
  };
  $scope.cancel = function() {
    $mdDialog.cancel();
  };
  $scope.answer = function(answer) {
    $mdDialog.hide(answer);
  };
}

But I get the error: 

Error: [$injector:unpr] Unknown provider: $mdDialogProvider <- $mdDialog <- cityController

The template is there. I know this problem is a problem of some dependency but I cannot find out which one.

Anyone can help?

Upvotes: 0

Views: 1688

Answers (1)

Syam Pillai
Syam Pillai

Reputation: 5217

The controller definition should be like

.controller('cityController', ['$scope','$mdDialog','$mdMedia',function ($scope, $mdDialog, $mdMedia){

    // your code will be here

  }])

And please inject ngMaterial dependency to your angular module like

angular.module('starter.cityController', ['ngMaterial'])

If you cant incluse ngMaterial using bower install add manually in index.html as

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>

Upvotes: 1

Related Questions