Question

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

<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>

使用此文件时，不会包含该文件，但我也没有收到任何错误。有人可以帮助我吗？

NB ：我看了this，这是一个类似的问题，但没有帮助我。

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

Answer 1

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

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

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

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

现在完美运作！

Answer 2

对Shane Gadsby的评论发表评论：它不是<div ng-include src="'partials/'+{{obj}}+'.html'"></div>而是<div ng-include src="'partials/'+obj+'.html'"></div>。您的注释解释了为什么＆＃39;这就是您需要强制它从对象文字到字符串＆＃39; ，所以不是单引号的所有内容都由编译器作为范围对象处理。 / p>

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

2 个答案: