问题描述
我将tiular与Angular.JS一起使用来创建智能电视应用。我想获得一个字幕列表以在我的视频应用程序上显示,但我不断收到此错误:“错误:限制列表的容器和模板视图应具有自己的大小,例如宽度和高度。”
在我的主要html上,我在这里有一个“设置”指令:
<settings></settings>
使用settings.html在此处显示caph列表:
<caph-list container-class="container" wrapper-class="setting-wrapper" items="item in subtitles"> <div class="item" focusable>{{item}}</div> </caph-list>
我已经在我的settings.html中尝试使用容器和包装器进行各种设置:
<div class="container">
<div class="wrapper">
<caph-list container-class="container" wrapper-class="setting-wrapper" items="item in
subtitles">
<div class="item" focusable>{{item}}</div>
</caph-list>
</div>
</div>
但是我仍然遇到相同的错误。
这是在容器和包装类上使用的CSS:
.container {
width: 800px;
height: 100px;
background-color: red;
}
.setting-wrapper {
width: 400px;
height: 100px;
left: 50px;
background-color: green;
}
.item {
width: 20px;
height: 20px;
background-color: blue;
margin: 10px;
}
这是开头的字幕数组:
$scope.subtitles = ["1","2","3"]
选择视频后,此数组将更改为包含字幕信息的对象的数组。
解决方法
您的容器的宽度可能为0像素。尝试设置一个绝对值而不是百分比,即800像素而不是60%),并确保父元素的宽度和高度(不为0)。