Question

我一直在使用这段代码：

modalInstance = $modal.open({
                templateUrl: 'myModalContent.html',
                controller: 'ModalInstanceController'
            });

和

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">Notification</h3>
    </div>
    <div class="modal-body">
        {{ er.msg }}
    </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>-->
</script>

如何在文件内而不是在文件内重新编码。这样做也有很大的缺点。我唯一能想到的是获取模板的第一个副本需要时间。但后来我认为它将从缓存中提供。

Answer 1

您可能需要查看templateCache：https://www.npmjs.com/package/gulp-angular-templatecache

这基本上将模板连接成一个文件，然后可以缩小，合并和提供，从而阻止下载多个.html视图文件。

Answer 2

唯一的缺点是额外的网络调用加载另一个html文件。尝试将html内容放在一个文件中，并将其另存为myModalContent.html。

    <div class="modal-header">
        <h3 class="modal-title">Notification</h3>
    </div>
    <div class="modal-body">
        {{ er.msg }}
    </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>-->

Answer 3

与创建任何普通HTML文件相同。

例如，假设您有一个包含该模板的HTML文件，并且已将其保存在Web应用程序根目录中名为partials的文件夹中。

除了脚本标记

之外，HTML内容将是相同的

    <div class="modal-header">
        <h3 class="modal-title">Notification</h3>
    </div>
    <div class="modal-body">
        {{ er.msg }}
    </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>-->

然后，您只需将相对URL传递到模板位置，如下所示：

    modalInstance = $modal.open({
        templateUrl: 'partials/yourtemplate.html',
        controller: 'ModalInstanceController'
    });

这是有效的，假设您的模板可在 http://localhost:port//YourApp/partials/yourtemplate.html

的位置访问

如何在文件中而不是在脚本中编写模板？

3 个答案: