ui.bootstrap modal loading html but not showing an

问题:

Its loading opening modal and also loading template specified. But not showing anything.

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

Go to [Products] and Search EnegiKcal >= 3500. Then click on manage. It will open pop up but template content is not loaded.

Also one other thing I noticed is that it returns HTTP 304 for template sometimes.

This is how I open 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 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>

回答1:

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

and your sources on the tag 0.11.

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

It is visible when you type $('.modal-content') in the console, you will see that it needs a modal-transclude directive, but in the sources there is no trace of this directive. Because, on 0.11 it directly uses the ng-transclude directive which is part of angular.

So, your code is correct, but the lib is not, try retrieving a correct version of it (maybe the last build of their repo is broken)

回答2:

As a matter of fact, I did have a similar problem when switching to angularjs v1.2. The formerly working dialog didn't show, just like yours. 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 everythin in a div with a modal-content class to make it work.

回答3:

include .map files for jquery and angular in your /js folder .may be that will help

回答4:

I have experienced this off and on for some reason as well.

I solved it by adding a CSS statement, after doing an inspection via Chrome's tools I found that for some reason the modal display was still set to hidden.

.modal {
    display: block;
}

回答5:

Take a look 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 will help you on how load a simple dinamic html as a modal.

Regards