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仍然是一个数组。

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

修改为了更好地理解tab标题的数量取决于json的结果：

JSON的部分：

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

Answer 1

在Angular中，控制器中的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>

AngularJS：为什么我不能在我的视图中注入html？

2 个答案: