引导模态和AngularJS

Question

我在我的应用程序中使用AngularStrap。我正在尝试实现引导的模态特性。问题是，我不能让它显示我的template模态。这里是plunker的链接。我的模板的id是test，我通过template='#test'引用(如在文档中解释的)，但我得到一个错误:Uncaught TypeError: Cannot set property 'display' of undefined。

Answer 1

template的文档说明如下:

如果提供，覆盖默认模板，可以是远程URL或缓存的模板id。

在angular中，模板既可以从远程源加载，也可以直接在script标签中定义。所有模板都是通过$templateCache实例加载的。因此，为了让你的模态显示你需要改变你的模态的定义，看起来像:

<script type="text/ng-template" id="test">
    <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"></h4>
                </div>
                <div class="modal-body" ng-bind="content"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
                </div>
            </div>
        </div>
    </div>
</script>

更新活塞演示。