Question

它的装载开口模态和指定的装载模板。但没有显示任何东西。

在此处查看演示：http://demo.hupp.in/food-admin

转到[产品]并搜索EnegiKcal＆gt; = 3500.然后点击管理。它会弹出，但不会加载模板内容。

另外我注意到的另一件事是它有时会为模板返回 HTTP 304 。

这就是我打开模态的方式：

/** 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');
    };
};

这是模板代码：

<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>

enter image description here

Answer 1

好的，这很奇怪，但似乎你的模板基于https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html的主分支

和您在标签0.11上的来源。

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

当您在控制台中键入$（'。modal-content'）时，它是可见的，您将看到它需要一个modal-transclude指令，但在源代码中没有此指令的跟踪。因为，在0.11它直接使用ng-transclude指令，它是angular的一部分。

所以，你的代码是正确的，但lib不是，尝试检索它的正确版本（可能是他们的repo的最后一个版本被破坏）

Answer 2

事实上，当切换到angularjs v1.2时，我确实遇到了类似的问题。以前的工作对话没有显示，就像你的一样。不得不改变结构看起来像这样让它再次可见：

<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>

我必须在一个带有模态内容类的div中包装everythin才能使它工作。

Answer 3

enter image description here 在/ js文件夹中包含jquery和angular的.map文件。可能会有帮助

Answer 4

我也出于某种原因经历过这种情况。

我通过添加CSS语句解决了这个问题，在通过Chrome工具进行检查后，我发现由于某些原因，模态显示仍然设置为隐藏。

.modal {
    display: block;
}

Answer 5

看看这个链接。

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

我认为可以帮助你将简单的dinamic html加载为模态。

此致

ui.bootstrap模态加载html但没有显示任何内容

5 个答案: