ui.bootstrap 模式加载 html 但不显示任何内容 [英] ui.bootstrap modal loading html but not showing anything

问题描述

它的加载打开模式和加载模板指定.但没有显示任何东西.

在此处查看演示:

当你在控制台输入 $('.modal-content') 时它是可见的，你会看到它需要一个 modal-transclude 指令，但在源代码中没有这个指令的痕迹.因为，在 0.11 上，它直接使用 ng-transclude 指令，它是 angular 的一部分.

所以，您的代码是正确的，但库不是，请尝试检索它的正确版本(也许他们的 repo 的最后一个版本已损坏)

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>

解决方案

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)

这篇关于ui.bootstrap 模式加载 html 但不显示任何内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！