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> 

и моя часть 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 остаются массивом.

За последние несколько часов я попробовал несколько решений, но до сих пор я не могу получить никаких результатов ... пожалуйста, кто-нибудь может мне помочь? Заранее большое спасибо.

EDIT для лучшего понимания числа заголовка вкладки зависит от результатов от JSON:

часть JSON:

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

Answer 1

В Угловом, HTML в контроллере является красный флаг; это неправильное место.

Вместо этого используйте ng-repeat, рядом с тем, что вы пробовали, чтобы построить HTML, here's a quick example.

В контроллере, просто держать данные:

$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 обновить данных в 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>