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

Question

它的加载打开模式和加载模板指定。但没有显示任何内容。

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

转到 [产品] 并搜索 EnegiKcal >= 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>

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 中以使其工作。

Answer 3

include .map 文件用于您的 /js 文件夹中的 jquery 和 angular。可能会有所帮助

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

我认为会帮助您了解如何将简单的动态 html 作为模态加载。

问候