AngularJS - 在指令中加载动态模板 HTML答案

【问题标题】：AngularJS - load dynamic template HTML within directiveAngularJS - 在指令中加载动态模板 HTML
【发布时间】：2013-01-14 11:56:31
【问题描述】：

我有一个从外部 HTML 文件加载内容的指令。传递到该指令的是一些范围数据，用于呈现该 HTML 片段。例如

<div class="{{cls}}" data-obj="{{obj}}" data-id="{{id}}">

</div>

我想在这个指令中做的是根据传递给指令的原始范围数据在其中加载进一步的 HTML 部分。我似乎无法让它工作，但它应该是以下内容：

<div class="{{cls}}" data-obj="{{obj}}" data-id="{{id}}">

<div ng-include="partials/{{obj}}.html></div>

</div>

使用它，文件不会被包含在内，但我也没有收到任何错误。有人可以在这里帮助我吗？

注意：我读过this，这是一个类似的问题，但对我没有帮助。

更新 - 我在 Chrome 开发工具中注意到 URL 正在按预期解析，但文件内容未包含在内。我从文档中认为ng-include 加载并编译了请求的片段，所以我期待它能够工作。

【问题讨论】：

标签： angularjs

【解决方案1】：

通过在指令中声明以下内容，最终找到了解决方案：

<div ng-include src="view.getView()"></div>

以及指令控制器中的以下内容：

$scope.view = {
    getView: function() {
        return "partials/" + $scope.obj + ".html";
    }
};

现在完美运行！

【讨论】：

您可以稍微简化一下，问题是它需要一个字符串，而不是对象：<div ng-include src="'partials/'+{{obj}}+'.html'"></div>。请注意，我在任何普通文本周围都加上了单引号，这就是您需要将其从对象文字强制转换为字符串的原因。

【解决方案2】：

在评论Shane Gadsby的评论时：不是<div ng-include src="'partials/'+{{obj}}+'.html'"></div>而是<div ng-include src="'partials/'+obj+'.html'"></div>。您的评论解释了为什么'这是您需要将其从对象文字强制转换为字符串'，因此所有不在单引号中的内容都由编译器作为范围对象处理。

【讨论】：