如何使用angular Include附加html内容

Question

我有一个要求，我们需要有条件地显示/隐藏div。但是，这里的div是基于click事件动态创建的。我使用了ng-include，但这总是替换每次点击事件的内容。

在 analyticsDetail.html 中，如果存在report对象（我在控制器中设置），则包含 metricsReport.html 页面。

analyticsDetail.html
<div id="metricsReport" ng-if="report" ng-include="'pages/metricsReport.html'"></div>


metricsReport.html
<div id="{{report.name | removeSpaces}}" ng-init="runReport(report);">{{report.name}}</div>

Click事件是从动态生成的菜单列表中触发的。

<div class="leftlist" style="border: none;">
<div ng-click="loadMitricsView(menus.report)" ng-repeat="menus in mgroup.menus" class="menuitems">{{menus.name}}</div>

控制器方法：

$scope.loadMitricsView = function(report) {
    $scope.report = report[0];
}