Angular Modal 仅适用于 Index.html答案

【问题标题】：Angular Modal Only Works Within Index.htmlAngular Modal 仅适用于 Index.html
【发布时间】：2015-08-04 15:05:34
【问题描述】：

我的角度模态正在工作：

但是，要让它工作，模式脚本必须在我的 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">

我错过了什么？

【问题讨论】：

如果理解正确，您是说 html 模板不会从服务器加载？如果是这样，请检查开发工具网络选项卡中的实际 ajax 请求，以便初学者查看响应正文中的内容。它是否在该文件中也有模板脚本标签或只是 html？
脚本标签在单独的 HTML 文件中。
删除脚本标签...仅返回原始 html
如果不存在匹配的脚本标签或 $templateCache 条目，则进行 ajax 调用。 angular 期望 html 而不是寻找另一个脚本标签。同样的原则适用于在角度路由或指令中使用的所有 templateUrl
谢谢，伙计。那很有帮助。如果您想将此作为答案发布，我会接受。

标签： javascript asp.net angularjs

【解决方案1】：

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

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

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

【讨论】：