javascript - Angular Modal 仅适用于 Index.html

Question

我的 Angular 模态正在工作:

但是，要让它工作，模态脚本必须在我的 index.html 中:

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body">
        <ul>
            <li ng-repeat="item in items">
                <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
            </li>
        </ul>
        Selected: <b>{{ selected.item }}</b>
    </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>

这是 Controller 中对它的调用:

    $scope.addRecipe = function () {
        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
            size: 'sm',
            resolve: {
                items: function () {
                    return $scope.items;
                }
            }
        });

如果我创建一个 HTML 文件并将其放在模态脚本之上，模态将停止显示。 (页面仍然变灰，但没有模式。)我试过将 HTML 文件放在根文件夹中(就在 index.html 旁边)，我已经把它放在一个单独的文件夹中，但它只是赢了出现。当我尝试使用这个单独的文件时，我更改了调用的 templateUrl 属性:

'app/partials/recipeAdd.html'

然后我更改了 HTML 中的 ID:

<script type="text/ng-template" id="app/partials/recipeAdd.html">

我错过了什么？

Answer 1

问题是使用模板脚本标记将 html 包装在远程模板文件中。

当为 Angular 提供一个 templateUrl 时，它会在 $templateCache 中查找匹配的条目，该条目也将由 ng-template 脚本填充在主页中也可以找到标签。如果没有找到，它将进行 ajax 调用并期望返回原始 html。

这个新获取的模板也将缓存在 $templateCache 中，因此不需要进一步的 ajax 调用来重新使用它