Ui.bootstrap modal html download but showing nothing

Question

Its bootstrap opening is modal, as well as the uploaded template specified. But do not show anything.

Check out the demo here: http://demo.hupp.in/food-admin

Go to the [Products] section and find EnegiKcal> = 3500. Then click "Manage". It will open, but the contents of the template will not be loaded.

I also noticed that it sometimes returns HTTP 304 for a template.

This is how I open the modal:

/** Open Modal For add edit tags */ $scope.open = function (productId) { var modalInstance = $modal.open({ templateUrl: 'views/some.html', controller: tagsModalInstanceCtrl, size: 'lg' }); modalInstance.result.then(function (msg) { }, function () { // $log.info('Modal dismissed at: ' + new Date()); }); }; var tagsModalInstanceCtrl = function ($scope, $modalInstance) { $scope.ok = function () { $modalInstance.close("hi"); }; $scope.cancel = function () { $modalInstance.dismiss('cancel'); }; }; 

Here is the template code:

 <div class="modal-header"> <h3 class="modal-title">I'm a modal!</h3> </div> <div class="modal-body"> <h3>Well, Hello there!</h3> </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> 

Answer 1

Ok, this is rather strange, but it seems that your template is based on the main branch https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html

and your sources on tag 0.11.

https://github.com/angular-ui/bootstrap/blob/0.11.0/src/modal/modal.js

This is visible when you enter $ ('. Modal-content') in the console, you will see that he needs the modal-transclude directive, but the sources do not have this directive. Because at 0.11, it directly uses the ng-transclude directive, which is part of angular.

So, your code is correct, but lib is not, try to find the correct version (maybe the latest version of their repo does not work)

Answer 2

Actually, I had a similar problem when switching to angularjs v1.2. Previously, a working dialogue was not shown, like yours. I had to change the structure to look something like this to make it visible again:

 <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="row"> <div class="col-lg-9"> <h3>{{header}}</h3> </div> </div> </div> <div class="modal-body"> <form name = "kontoForm" szp-focus="sifra"> <!-- Šifra --> <szp-input id="sifra" text="Šifra" place-holder="šifra" value="konto.sifra" required="!konto.sifra"></szp-input> <!-- Naziv --> <szp-input id="naziv" text="Naziv" place-holder="naziv" value="konto.naziv" required="!konto.naziv"></szp-input> </form> </div> <div class="modal-footer"> <button class="btn btn-primary" ng-hide="!kontoForm.$valid || (mode == 'edit')" ng-click="okContinue()">OK i nastavi</button> <button class="btn btn-primary" ng-hide="!kontoForm.$valid" ng-click="ok()">OK i zatvori</button> <button class="btn btn-warning" ng-click="cancel()">Odustani</button> </div> </div> </div> 

I had to wrap everything in a div using the modal-content class to make it work.

Answer 3

contain .map files for jquery and angular in the / js folder. Maybe this will help

Answer 4

I, too, raced and for some reason.

I solved this by adding CSS instructions, after checking with Chrome tools, I found that for some reason the modal display was still hidden.

 .modal { display: block; } 

Answer 5

Check out this link.

 vm_main.showModal = { mostrarErrores : false, showModal : function(jsonError) { var options={ tituloModal: jsonError.titleModal, textoPrincipal: jsonError.mainMessage, textoBtnAceptar: "Aceptar", accionBtnAceptar: "vm_popup.cerrarPopup()", }; commonPopUpService.getDisclaimerGeneric($scope, 'commonPopUpController', options); } }; 

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

I think it will help you in how to load simple dynamic html as modal.

Hello