modal() is undefined and modal template is appended to body

[contrastlogic]

Code is entered exactly as the example and when the showAModal() function fires the modal template html is appended to the body while the console outputs this:

TypeError: undefined is not a functionwhich points to this line modal.element.modal();

Using Angular 1.3.0
Any insight is appreciated.

Code in the controller

            $scope.showAModal = function () {
                ModalService.showModal({
                    templateUrl: 'partials/cancel-membership.modal.html',
                    controller: 'ModalCtrl'
                }).then(function (modal) {

                    //it's a bootstrap element, use 'modal' to show it
                    modal.element.modal();
                    modal.close.then(function (result) {
                        console.log(result);
                    });
                });
            };

[dwmkerr]

I'll take a look, my guess is that perhaps there's a problem with the template but it's possible it's an Angular 1.3 issue..

[ghost]

I'm having same problems when using AngularJS 1.2.20 even though showModal() promise seems to return correct object.

[aghuddleston]

I'm having the same problem with AngularJS 1.3.2. I tried using the template from the simple example and was able to show the modal through the console, but not through the code. Any ideas?

[abrahamks]

I'm having the same problem with AngularJS 1.2.27.

$scope.showComplex = function() {
            ModalService.showModal({
              templateUrl: "components/modals/complex.html",
              controller: "ComplexController",
              inputs: {
                title: "A More Complex Example"
              }
            }).then(function(modal) {
              modal.element.modal();
              modal.close.then(function(result) {
                $scope.complexResult  = "Name: " + result.name + ", age: " + result.age;
              });
            });

          };

this is is what inside .then(function(modal) when I debugged it using Chrome Developer Tools

[dwmkerr]

If you are getting undefined is not a function, there's a good chance you haven't included the bootstrap modal javascript files (your modal is valid, the elemtn is valid, it's the modal function bootstrap adds to the element that seems to be missing. Try including the bootstrap javascript for modals.

[mjcuadrado]

i Have same problem with Angular 1.3.0

My code controller:

  var app = angular.module('visorTecnico',['ui.bootstrap','acute.select','angular-loading-bar', "angucomplete-alt","angularModalService"]);

    app.controller('TabController', ['$http', '$scope', '$window', function($http, $scope, $window){

          $scope.articulos =[];


          //AREA CARRITO COMPRA
      $scope.mostrarCarrito=function(){
        ModalService.showModal({
            templateUrl: '../componentes/popCarritoCompra.html',
            controller: "YesNoController"
        }).then(function(modal) {
            modal.element.modal();
            modal.close.then(function(result) {
                $scope.message = "You said " + result;
            });
        });
      };
      $scope.anadirCarrito=function(articulo){
        $scope.carrito.push(articulo);
      };


    }]);

   app.controller('YesNoController', ['$scope', 'close', function($scope, close) {

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

}]);


      app.controller('GalleryController', function(){
        this.current = 0;
        this.setCurrent = function(newGallery){
          this.current = newGallery || 0;
        };
      });

popCarritoCompra.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(false)" 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(false)" class="btn btn-default" data-dismiss="modal">No</button>
        <button type="button" ng-click="close(true)" class="btn btn-primary" data-dismiss="modal">Yes</button>
      </div>
    </div>
  </div>
</div>

Call in index.html

<li class="btn-navegacion col-md-2 col-xs-2">
                     <button type="button" class="btn btn-group-xm btn-navegacion" ng-click="mostrarCarrito()">
                      <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> <span class="badge">{{carrito.length}}</span>
                    </button>
                  </li>

When I debug it shows "undefined is not a function" . I tried to include " modal.js " boostrap but has not worked.

Can anyone help me ?

Thank you

[jonmiller1]

I'm having the same trouble. Angular 1.3.

[satybald]

I had the same problem. Besides that you need to sure that bootstrap.js has been included into your page as pointed @dwmkerr, you also need to be sure that boostrap.js comes before angular.js. After I moved angular.js below bootstrap.js it starts working properly.

[TheKnarf]

I thought that bootstrap wasn't a dependency?

[dwmkerr]

@TheKnarf bootstrap isn't a dependency, unless you are using a bootstrap modal. There's examples in the sample app that show how to use custom modals. Bootstrap is just a very common framework that is used, but not strictly required

[dwmkerr]

Closing this issue as the solution is document in the FAQ.

[treii28]

check the load order also. My bootstrap was being pulled in in the opposite order in zend using $views->headScript()->prependFile('/path/to/script.js') in the layout. (since it is pre-pending the values, the last one prepended ends up being listed first, the first one last)

i.e.:

$this->headScript()->prependFile($this->basePath() . 'jquery.js', 'text/javascript');
$this->headScript()->prependFile($this->basePath() . 'bootstrap.js', 'text/javascript');
$this->headScript()->prependFile($this->basePath() . 'angular.js', 'text/javascript');
$this->headScript()->prependFile($this->basePath() . 'angular-resource.js', 'text/javascript');
$this->headScript()->prependFile($this->basePath() . 'angular-modal-service.js', 'text/javascript');
echo $this->headScript();

needed to be:

$this->headScript()->prependFile($this->basePath() . 'angular-modal-service.js', 'text/javascript');
$this->headScript()->prependFile($this->basePath() . 'angular-resource.js', 'text/javascript');
$this->headScript()->prependFile($this->basePath() . 'angular.js', 'text/javascript');
$this->headScript()->prependFile($this->basePath() . 'bootstrap.js', 'text/javascript');
$this->headScript()->prependFile($this->basePath() . 'jquery.js', 'text/javascript');
echo $this->headScript();