javascript - AngularJS:为什么我不能在我的 View 中注入(inject)html？

Question

我对 AngularJS 非常陌生，我看到了一些解决方案，但是，由于我缺乏经验，我不知道如何使用这些解决方案来完成我的任务，所以我请求帮助，请请耐心听我说。基本上，正如我的问题所说，我需要在我的 View 中注入(inject)并渲染一些 HTML。这是我的代码:

HTML

<tabset panel-tabs="true" panel-class="panel-grape" ng-controller="MainController" data-heading="OTHER NEWS">
   <div ng-repeat="tab in baseString" ng-bind-html-unsafe="tab">

    </div>

</tabset>

以及我的 Controller 部分:

function createBase() {
    for (var i = 0; i < $scope.news.news[0].posizioni.length; i++) {
        // $scope.tabsName[i] = $scope.news.news[0].posizioni[i][i];
    $scope.baseString[i] =["<tab heading='" + $scope.news.news[0].posizioni[i][i] + "' ng-controller='MainController'><div class='col-xs-12 col-sm-6 col-md-6' id='colonaDx"+ $scope.news.news[0].posizioni[i][i] +"'></div><div class='col-xs-12 col-sm-6 col-md-6' id='colonaSx"+ $scope.news.news[0].posizioni[i][i] +"'></div><div id='paginaz"+ $scope.news.news[0].posizioni[i][i] +"'></div></tab>"];
    }
}

我需要 tabsName 保留为数组。

在过去的几个小时里，我尝试了几种解决方案，但到目前为止我无法获得任何结果...有人可以帮助我吗？预先非常感谢。

编辑为了更好地理解选项卡 header 的数量取决于 json 的结果:

JSON 部分:

    {
   "news":[
      {
         "posizioni":[
            {
               "0":"allNews"
            },
            {
               "1":"SecondTab"
            }
         ]
       }
]
}

Answer 1

在 Angular 中， Controller 中的 HTML 是一个危险信号；这是错误的地方。

相反，使用 ng-repeat(接近您尝试过的方式)来构建 HTML，here's a quick example .

在您的 Controller 中，只需保留数据:

$scope.data = {
    "news": [
        {"posizioni": [
            {"0": "allNews"},
            {"1": "SecondTab"},
        ]}
    ]
};

在 HTML 中，您的 ng-repeat 可以如下所示；由于上面的 JSON 结构，它变得有点困惑，但它完成了工作:

<tab ng-repeat="(key, name) in data['news'][0]['posizioni']" heading="{{ tab.key }}" ng-click="selectTab($event, key, name)">{{ name[key] }}</tab>

在 fiddle 中，我添加了一个单击处理程序，以展示如何对 TabController 中发生的单击使用react，以通过服务更新 ContentController 中的数据。请注意，ContentService 包含一个数据数组，但您可以更新它以动态地从上游服务器请求内容:

$scope.selectTab = function (event, key, name) {
    ContentService.setContent(key);
}