Angular-Strap模态框无法加载模板。

Question

出现某些原因，模态框可以正常工作，但它不会加载我指定的任何模板。

我的控制器有这段代码;

var brnSearchModal = $modal({ scope: $scope, template: "app/rrn/searchBrn.html", contentTemplate: false, html: true, show: false });

$scope.showModal = function () {
    brnSearchModal.$promise.then(brnSearchModal.show);
};

我的HTML代码如下：

<button data-ng-click="showModal()" type="button" class="btn btn-info" data-animation="am-fade-and-slide-top">
    BRN Lookup
</button>

我的模板存储在一个文件中，内容如下：

<div class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" ng-show="title">
                <button type="button" class="close" ng-click="$hide()">&times;</button>
                <h4 class="modal-title" ng-bind="title">Hello, World!</h4>
            </div>
            <div class="modal-body" ng-bind="content">Lorem ipsum dolor.</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
            </div>
        </div>
    </div>
</div>

没有错误，似乎一切正常工作，但模板未加载。如果我在调试Angular-strap时，在某个时间点模板已经被加载，但是随后消失并留下一个空模态。

- Lukasz

Answer 1

从模板中删除ng-show="title"和ng-bind="title"。

- dcdrns

Answer 2

试着添加 bs-modal 属性：参见 examples

<button data-ng-click="showModal()" type="button" class="btn btn-info" data-animation="am-fade-and-slide-top" bs-modal="brnSearchModal">
    BRN Lookup
</button>

否则直接使用data-template属性而不使用JS来显示模态框：

<button type="button" class="btn btn-info" data-animation="am-fade-and-slide-top" data-template="app/rrn/searchBrn.html" bs-modal="modal">
    BRN Lookup
</button>

我认为当你在使用bs-modal="modal"时，modal在angular-strap库中已经被预定义了。

- Fourat

Answer 3

你应该从模板中删除 ng-show="title"，ng-show="content" 或者 ng-bind="title"。确保模板中没有 ng-show。

- Python Basketball

---

如果您想显示模态框标题，请删除ng-bind-html =“title”。 - Python Basketball

Answer 4

我知道这是一个老问题，但如果其他人正在寻找解决方案，我发现当将模板设置为HTML字符串时，必须明确将templateUrl设置为假值。

- Mike Hanson