404 Not Found error when opening modal in Angular

Question

I have a really strange problem when using UI Bootstrap. Even the simplest example does not work. So this is my case:

I have a Play Framework application using the yeoman plugin: https://github.com/tuplejump/play-yeoman. It is using AngularJS and Bootstrap. So far everything worked fine, but these weird errors came up when I tried to open my first modal using the UI Bootstrap library from http://angular-ui.github.io/. I used the exact code from http://angular-ui.github.io/bootstrap/#/modal but somehow it does not work. This is the code for opening my modal:

var modalInstance = $modal.open({
    templateUrl: 'myModalContent.html',
    controller: ModalInstanceCtrl,
    size: size,
    resolve: {
      items: function () {
        return ['item1', 'item2', 'item3'];
      }
    }
  });

And the errors that appear in the dev console are:

GET http://localhost:9000/ui/function%20(a,b)%7Breturn%20b.templateUrl%7C%7C%22template/modal/window.html%22%7D 404 (Not Found) angular.js:9499
Uncaught TypeError: undefined is not a function angular.js:9512

I tried many solutions for similar problems but none of that worked. This is how I load the ui-boostrap:

<script src="components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>

I've been searching for solution for a long time but I haven't encountered a problem with the function%20(a,b)%7... in the URL and none of the soluions did work. Any help appreciated!

Answer 1

I had this same issue, and it appeared to be a version conflict. I was using Angular version 1.0.8 and Angular Bootstrap 0.11.0. After upgrading to Angular 1.2.21, the problem seems to have been resolved.

Answer 2

heres my code:

add a service

.factory('ModalService', ['$modal', function($modal) {
     var modalDefaults = {
         backdrop: true,
         keyboard: true,
         modalFade: true,
         size: 'sm',
         templateUrl: 'pages/modals/transfer.html'
     };

     var modalOptions = {
         closeButtonText: 'Close',
         headerText: 'Success!',
         bodyText: 'DefaultBody'
     };

     return {
            showModal: function (customModalDefaults, customModalOptions) {
                  if (!customModalDefaults) customModalDefaults = modalDefaults;
                  if (!customModalOptions) customModalOptions = modalOptions;
                  customModalDefaults.backdrop = 'static';
                  return this.show(customModalDefaults, customModalOptions);
            },
            show:function (customModalDefaults, customModalOptions) {
                       //Create temp objects to work with since we're in a singleton service
                       var tempModalDefaults = {};
                       var tempModalOptions = {};

                       //Map angular-ui modal custom defaults to modal defaults defined in service
                       angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);

                       //Map modal.html $scope custom properties to defaults defined in service
                       angular.extend(tempModalOptions, modalOptions, customModalOptions);

                       if (!tempModalDefaults.controller) {
                           tempModalDefaults.controller = function ($scope, $modalInstance) {
                               $scope.modalOptions = tempModalOptions;
                               $scope.modalOptions.ok = function (result) {
                                   $modalInstance.close(result);
                               };
                               $scope.modalOptions.close = function (result) {
                                   $modalInstance.dismiss('cancel');
                               };
                           }
                       }

                        return $modal.open(tempModalDefaults).result;
                }
     }

}]);

and in controller, call to get default modal

ModalService.showModal();

dont forget to inject the service into controller.

edit: added template code

    <div class="modal-header">
    <h3>{{modalOptions.headerText}}</h3>
</div>
<div class="modal-body">
    <p>{{modalOptions.bodyText}}</p>
</div>
<div class="modal-footer">
    <button type="button" class="btn"
            data-ng-click="modalOptions.close()">{{modalOptions.closeButtonText}}</button>
</div>

Answer 3

Did you copy the template part from the Markup part of ui-bootstrap's example?

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body">
        <ul>
            <li ng-repeat="item in items">
                <a ng-click="selected.item = item">{{ item }}</a>
            </li>
        </ul>
        Selected: <b>{{ selected.item }}</b>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">OK</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
</script>