angularjs - Angularstrap - 模态框

Question

我正在使用 rails 来构建我的应用程序。试图用 angularstrap http://mgcrea.github.io/angular-strap/#/modal弹出一个模态框，他们给出了使用带局部模态框的示例。但我想从同一页面调用一个 div。他们提到了一些东西使用 ng-template。但我没有得到任何文档。有人知道这个吗？？

Answer 1

ng-template 您可以在 AngularJS 文档中阅读有关此处的信息。实现如下：

<script type="text/ng-template" id="modal-template.html">
     <div>Content of Modal</div>
</script>

然后在您调用模态的地方，将对部分的引用替换为modal-template.html：

<button data-toggle="modal" bs-modal="'modal-template.html'">Call to Action</button>

Answer 2

在主 html 页面中定义您的 TemplageCache，如下所示：

<script type="text/ng-template" class="modal" id="/myTmpl.html">
    <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" aria-label="Close" ng-click="$hide()">
                    <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">This title</h4>
                </div>
                <div class="modal-body">
                  This is content
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
                </div>
            </div>
        </div>
    </div>
</script>

然后在javascript中

$scope.showMyModal=function(){
    var myModal = $modal({placement:'center', animation:"am-fade-and-scale", templateUrl:'/myTmpl.html', show: true});
}

Answer 3

如果您有一个内联（javascript 中的 html 字符串）变量，则 ng-template 将是。例如：

var t = "<div></div>";

t 可能是您的 ng 模板。

不幸的是，我不知道如何做你正在寻找的东西。