current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 10 down vote favorite
1

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!

share|improve this question
up vote 21 down vote accepted

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!

share|improve this answer
    
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
up vote 5 down vote

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) {}]);
share|improve this answer
    
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: 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
up vote 4 down vote

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();
share|improve this answer
    
Can you please provide plunk with simaple example. error '$modal' is not defined. I have included jquery before ui.bootstrap – user2323308 Nov 5 '15 at 7:23
    
be sure that you should include angular-modal file – vineet sah Nov 5 '15 at 11:01
up vote 1 down vote

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.

share|improve this answer
    
To the original poster, as an fyi, creating a plunkr of your own would make it super simple for us to show you what you need to do differently. – john west Feb 15 '14 at 10:18
1  
Please consider including more of the code in the answer. – Benjamin Gruenbaum Feb 16 '14 at 9:17

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.