角带模式没有显示html模板

时间:2014-08-17 11:19:50

标签: angularjs angular-strap

这是模态按钮:

<button type="button" class="btn btn-lg btn-danger" data-animation="am-fade-and-scale" data-template="templates/AddNewItem.tpl.html" bs-modal="modal">
                    Custom Modal
                    <br>
                    <small>(using data-template)</small>
                </button>

在'templates'文件夹中我有“AddNewItem.tml.html”(我还在google chrome开发者工具的“网络”标签中查看了它创建的文件)。

“AddNewItem.tml.html”按照指示here构建。 这就是它的样子:

<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">My Title</h4>
        </div>
        <div class="modal-body" ng-bind="content">
            My Content

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
        </div>
    </div>
</div>

当我按下按钮时,我得到一个没有任何内容的空模态对话框。

plnkr

1 个答案:

答案 0 :(得分:1)

有点迟到了回答,但在这里 html中的bs-modal标记必须引用控制器中的对象。

myApp.controller('modalController', function($scope){
  $scope.modal = {
    "title": "Title",
    "content": "Hello Modal. This is a custom message!"
  };
});