AngularJS：為什么我不能在視圖中注入html？

Question

我是AngularJS的新手，我看到了一些關於SO的解決方案，但是由於我的經驗不足，我無法弄清楚如何使用這些解決方案來完成任務，所以我需要幫助，請耐心等待。 基本上，正如我的問題所述，我需要在視圖中注入並呈現一些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>

和我的控制器部分：

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保持數組。

在過去的幾個小時中，我嘗試了幾種解決方案，但是到目前為止，我仍然無法獲得任何結果...請有人可以幫助我嗎？ 非常感謝。

編輯以更好地了解選項卡標題的數量取決於json的結果：

JSON部分：

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

Answer 1

在Angular中，控制器中的HTML是一個紅色標記； 這是錯誤的地方。

相反，請使用接近您嘗試的ng-repeat來構建HTML， 這是一個簡單的示例 。

在您的控制器中，只需保留數據 ：

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

在小提琴中，我添加了一個單擊處理程序，以顯示如何對TabController中發生的單擊做出反應，以通過Service更新ContentController中的數據。 注意，ContentService包含一個數據數組，但是您可以對其進行更新以動態地向上游服務器請求內容：

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

Answer 2

只需將html字符串從您的控制器移動到html之類

<tabset panel-tabs="true" panel-class="panel-grape" ng-controller="MainController" data-heading="OTHER NEWS">
    <tab  ng-repeat="tab in news.news[0]" heading='{{tab[$index]}}' ng-controller='MainController'>
        <div class='col-xs-12 col-sm-6 col-md-6' id='colonaDx{{tab[$index]}}'></div>
        <div class='col-xs-12 col-sm-6 col-md-6' id='colonaSx{{tab[$index]}}'></div>
        <div id='paginaz{{tab[$index]}}'></div>
    </tab>
</tabset>