Question

我的角度模态正在起作用：

但是，要使其工作，模态脚本必须位于我的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>

这是控制器中的呼叫：

    $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包装在远程模板文件中。

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

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

Angular Modal仅适用于Index.html

1 个答案: