12

I'm trying to get a modal to appear using Angular-UI v0.10.0 (http://angular-ui.github.io/bootstrap/) and Angular 1.1.5 and I receive the following error:

Error: $modal.open is not a function

I'm not sure or why I'm getting this error. Here's what I have...

HTML:

    <div ng-controller="ModalDemoCtrl">
        <button class="btn btn-default btn-sm" ng-click="open()">open me</button>
    </div>

JS:

app.controller('ModalDemoCtrl', ['$scope', '$modal', function ($scope, $modal) {
    $scope.open = function () {
        var modalInstance = $modal.open({
            templateUrl: 'template.html',
            controller: 'ModalInstanceCtrl', 
            resolve: {}
        });
    };
}]);

app.controller('ModalInstanceCtrl', ['$scope', '$modalInstance', function ($scope, $modalInstance) {
    $scope.ok = function () {
        $modalInstance.close();
    };
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
}]);

I'm just trying to get the basics down first...like getting it to open. I've pretty much exhausted me resources, so any help would be greatly appreciated! Thanks!

Chen-Tsu Lin
  • 22,876
  • 16
  • 53
  • 63
awmcreative
  • 441
  • 1
  • 3
  • 7

4 Answers4

22

I fixed the problem.

Apparently, I had angular-strap beneath angular-ui, which was overwriting the angular-ui. Both scripts were obviously in conflict with one another.

The app I'm working on is complicated, so this was easy to overlook. However, word of advice, stick with one library and keep things simple.

Thanks everyone!

awmcreative
  • 441
  • 1
  • 3
  • 7
  • You can also disable some angular-strap items and let only those you need, by adding the submodules you need in the dependency list, like var app = angular.module('yourApp', [ 'ui.router', 'ui.bootstrap', 'mgcrea.ngStrap.popover', 'mgcrea.ngStrap.affix', 'pascalprecht.translate', 'ngAnimate', 'xeditable', 'restangular', .... – Diego Pamio Dec 22 '15 at 12:09
5

This error cause by including $modal unsuccess.

Make sure:

  1. add source link between your angular.js & yourapp.js

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
<script src="assets/js/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="assets/js/yourapp.js"></script>

  2. add ui.bootstrap to the module

    app = angular.module('yourApp', ['ui.bootstrap']);

  3. add $modal independency to your controller

    app.controller('ModalDemoCtrl', ['$scope', '$modal', function ($scope, $modal) {}]);
Chen-Tsu Lin
  • 22,876
  • 16
  • 53
  • 63
  • If he didn't have #1 done, $modal.open would never be called, so the particular error being thrown would never happen. And his example shows that he did #3. – john west Feb 15 '14 at 10:16
  • Thanks for the feedback. I believe I have done what you have suggested already. I've ran into a very interesting problem. I recreated everything in plunker: http://plnkr.co/edit/fUDughjZaWtcd309OUqY?p=preview and everything works. But when I place everything into the real app, I still received the "Error: $modal.open is not a function" error. – awmcreative Feb 17 '14 at 20:35
5

This problem occur due to different version of angular-modal and angularjs. I had faced same problem in angular-modalv.0.5 and got a solution i.e,

use:

$modal({......});

Instead of:

$modal.open({......});

For example:-

 var termAndConModal = $modal({
    title: 'Info',
    controllerAs: 'termAndConModalController',
    template: '../views/partials/term_n_cond_modal.html',//;myModalContent.html',
    show: false
});
$scope.showtermAndConModal = function() {
    termAndConModal.$promise.then(termAndConModal.show);
};
$scope.showtermAndConModal();
vineet
  • 13,832
  • 10
  • 56
  • 76
1

Where is your ng-app? You have to have an app referenced that in turn includes ui.bootstrap.

See the plunkr below.

http://plnkr.co/edit/?p=preview

If you have that and just aren't showing it, another thing to try is using the latest version of angular. 1.1.5 is pretty old.

john west
  • 646
  • 5
  • 9