Angular Modal Service

Question

I'm trying to get modals working in my Angular application. I tried using Bootstrap and Angular Material modals but I could not make them work. I decided to try with Angular Modal Service, however I'm getting the same error. Whenever I call the function ModalService.showModal I get the following error:

angular.js:12416 TypeError: Cannot read property 'showModal' of undefined
at Scope.$scope.show (AboutController.js:4)
at fn (eval at <anonymous> (angular.js:13231), <anonymous>:4:203)
at callback (angular.js:23371)
at Scope.$eval (angular.js:15878)
at Scope.$apply (angular.js:15978)
at HTMLAnchorElement.<anonymous> (angular.js:23376)
at HTMLAnchorElement.n.event.dispatch (jquery-2.2.3.min.js:3)
at HTMLAnchorElement.r.handle (jquery-2.2.3.min.js:3)

The service im using:

https://github.com/dwmkerr/angular-modal-service

The JS Fiddle example that I used:

http://jsfiddle.net/dwmkerr/8MVLJ/?utm_source=website&utm_medium=embed&utm_campaign=8MVLJ

Include:

<!-- Include jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<!-- Include Bootstrap -->
<script src="../node_modules/bootstrap/js/bootstrap.js"></script>
<!-- Include Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<!-- Include ModalService-->
<script src="../node_modules/angular-modal-service/dst/angular-modal-service.min.js"></script> 

About.html:

<div class="container">
<div class="col-sm-6 col-sm-offset-3 form-box">

<h3>Comentarios</h3>

<a class="btn btn-default" href ng-click="show()">Show a Modal</a>
 <!-- The actual modal template, just a bit o bootstrap -->
 <script type="text/ng-template" id="modal.html">
     <div class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Yes or No?</h4>
          </div>
          <div class="modal-body">
            <p>It's your call...</p>
          </div>
          <div class="modal-footer">
            <button type="button" ng-click="close('No')" class="btn btn-default" data-dismiss="modal">No</button>
            <button type="button" ng-click="close('Yes')" class="btn btn-primary" data-dismiss="modal">Yes</button>
          </div>
        </div>
      </div>
    </div>
 </script>
</div>
</div>

App.module.js:

var Tiendiia = angular.module('Tiendiia', ['ui.router', 'ngMaterial', 'ui.bootstrap', 'ngCookies', 'angularModalService',]);

Tiendiia.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('yellow')
.accentPalette('orange')
.warnPalette('amber')
.backgroundPalette('grey');
});

AboutController.js

Tiendiia.controller('AboutController', ['$scope',  function($scope, ModalService) {

$scope.show = function() {
    ModalService.showModal({
        templateUrl: 'modal.html',
        controller: "ModalController"
    }).then(function(modal) {
        modal.element.modal();
        modal.close.then(function(result) {
            $scope.message = "You said " + result;
        });
    });
};


}]);

ModalController.js

Tiendiia.controller('ModalController', function($scope, close) {

 $scope.close = function(result) {
close(result, 500); // close, but give 500ms for bootstrap to animate
};

});

I have looked everywhere I could, but I can't find why it's not working.

Thanks!

Answer 1

On angular material it is called dialog what you need. Sometimes angular material uses John Papa style that is recommended but sometimes difficult to understand for beginners. If you understand this guide then you really understand angular.

Link To styleguide

Try to use modal of ui.bootstrap and do not add unnecessary libraries with functionality that you already have on ui bootstrap. Anyways I think your error might be here:

It seems that on about controller

['$scope', function($scope, ModalService)

you need to add ModalService

['$scope', 'ModalService', function($scope, ModalService)