$uibModal not opening, giving errors

Question

So I have tried everything, every example, I have absolutely no idea whats wrong. Whenever I try to load in '$uibModal' I get errors and all of my angular code breaks. If I dont load it in properly then i get $uibModal.open errors. Here is my code. I am at the current version of 0.14.3, I just downloaded the file today. If it matters my angular app is in rails and im using bower to import everything.

The app.js file where I loaded in my js.

var app = angular.module('planoxApp',
['ui.router', 
'nya.bootstrap.select',  // bootstrap select
'ngAnimate',
'ui.bootstrap', 
'main-directives',    
'templates',  
'color.picker', 
'xeditable',   
'restangular',   
'ngDragDrop', 
'angularFileUpload',
'ngStorage'  

// 'mgcrea.ngStrap',
// 'mgcrea.ngStrap.typeahead',
// 'mgcrea.ngStrap.tooltip',
// 'mgcrea.ngStrap.helpers.parseOptions',

])

The ctrl loading area, this brings up the error

[$injector:unpr] Unknown provider: $uibModalProvider <- $uibModal <- PhotoplanCtrl

app.controller('PhotoplanCtrl',['$http','$scope','$stateParams','$filter','$uibModal','$log',
function($http,$scope, $stateParams,$filter,$uibModal,$log){

But if i change it too

 app.controller('PhotoplanCtrl',['$http','$scope','$stateParams','$filter','$log',
function($http,$scope, $stateParams,$filter,$uibModal,$log){

The error goes away, and instead we get, Error: $uibModal.open is not a function. (In '$uibModal.open', '$uibModal.open' is undefined)

Here is the modal code

 var modalInstance = $uibModal.open({
    animation: $scope.animationsEnabled,
    templateUrl: 'templates/photoplan/ModalPublish.html',
    controller: 'ModalPublishCtrl'
});

If anyone knows whats wrong, any help is really appreciated.

This seems to work: http://plnkr.co/edit/MdQirCdgrkrUYjybtjRo?p=preview — Andy W, Nov 30 '15 at 23:09
Have you made certain that ui.bootstrap is in loaded in your index.html? The second error is a red herring. Because you removed $uibModal from the dependency array, Angular is actually injecting $log where your code is expecting $uibModal. — JC Ford, Nov 30 '15 at 23:09
So Im going to make a more detailed comment down below. But JC is on the right track. I used the links in Andy W plunker, and inserted them inside the application.html.erb file, basically the index.html, and now its working. So obviously its not loading properly into the index.html file. I think it might getting loaded before bootstrap. So im going to relook then post a follow up comment/answer — Zoe Steinkamp, Dec 01 '15 at 00:56
You might also check to see if your original view (html) is referencing your second controller (ModalPublishCtrl). It shouldn't need to since it is being referenced in your $uibModal.open function. See similar problem and solution here: http://stackoverflow.com/a/33980575/1303740 — Andy W, Dec 01 '15 at 15:17

score 0 · Accepted Answer · answered Dec 01 '15 at 22:17

Okay so first things first, in my modal html you cant have ng-controller. Apparently bootstrap handles it, so my new html looks like.

<div class="modal-header" >
            <h3 class="modal-title">Account Settings</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li>
                  <p>An option to chage password and account username </p>
                  <p>An option to change time settings </p>
                  <p> </p>
                </li>
            </ul>
        </div>
        <div class="modal-footer">
            <button class="btn btn-warning" type="button" ng-click="cancel()">Close</button>
        </div>

Also for some reason it is not loading properly either in my rails pipeline or in angular, which is very strange. I might report an issue on github for that one, but otherwise I just added the CDN to my index.html file and it started to work properly.

$uibModal not opening, giving errors

1 Answers1