[英]AngularJS: why can't I inject html in my view?
I'm very very new to AngularJS and I saw some solutions on SO, but, due to my inexperience, I can't figure out how to achieve my task with those solutions, so I'm asking for help, please bear with me. 我是AngularJS的新手,我看到了一些关于SO的解决方案,但是由于我的经验不足,我无法弄清楚如何使用这些解决方案来完成任务,所以我需要帮助,请耐心等待。 Basically, as my question says, I need to inject and render some HTML in my view.
基本上,正如我的问题所述,我需要在视图中注入并呈现一些HTML。 Here is my code:
这是我的代码:
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>
and my part of the 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>"];
}
}
I need that tabsName remain an array. 我需要tabsName保持数组。
Over the last few hours, I have tried several solutions, but so far I'm not able to obtain any results...please can anyone help me out? 在过去的几个小时中,我尝试了几种解决方案,但是到目前为止,我仍然无法获得任何结果...请有人可以帮助我吗? Thanks a lot in advance.
非常感谢。
EDIT for better understanding the number of tab header depends on the results from a json: 编辑以更好地了解选项卡标题的数量取决于json的结果:
PORTION OF JSON: JSON部分:
{
"news":[
{
"posizioni":[
{
"0":"allNews"
},
{
"1":"SecondTab"
}
]
}
]
}
In Angular, HTML in your controller is a red flag; 在Angular中,控制器中的HTML是一个红色标记; it's the wrong place.
这是错误的地方。
Instead, use ng-repeat
, close to what you tried, to build the HTML, here's a quick example . 相反,请使用接近您尝试的
ng-repeat
来构建HTML, 这是一个简单的示例 。
In your controller, simply keep the data : 在您的控制器中,只需保留数据 :
$scope.data = {
"news": [
{"posizioni": [
{"0": "allNews"},
{"1": "SecondTab"},
]}
]
};
In the HTML, your ng-repeat
can look like this; 在HTML中,您的
ng-repeat
可能如下所示; because of the JSON structure above it gets a little messy, but it gets the job done: 由于上面的JSON结构有些杂乱,但可以完成工作:
<tab ng-repeat="(key, name) in data['news'][0]['posizioni']" heading="{{ tab.key }}" ng-click="selectTab($event, key, name)">{{ name[key] }}</tab>
In the fiddle I added a click handler to show how you can react to the click that happened in the TabController to update data in the ContentController through a Service. 在小提琴中,我添加了一个单击处理程序,以显示如何对TabController中发生的单击做出反应,以通过Service更新ContentController中的数据。 Note, the ContentService contains an array of data, but you could update this to dynamically request the content from the upstream server:
注意,ContentService包含一个数据数组,但是您可以对其进行更新以动态地向上游服务器请求内容:
$scope.selectTab = function (event, key, name) {
ContentService.setContent(key);
}
just move html string from your controller to your html like 只需将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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.