当多个列表时，caph-list 不工作

Question

我必须在 Tizen TV 上显示多个产品列表，一个按类别列出。我将 Caph 3.1.0 与 angular 和 Samsung TOAST 一起使用。

首先我连接到我们的服务器以获取我们所有的产品，然后使用这些产品。每个产品都有一个或多个 'category' 字段，然后我使用这些产品在 $scope.categories 中获取类别并在 $scope.sortedList 中对产品进行排序，如下所示：

controller.js

中的代码

$scope.categories = ['A', 'B', 'C'];
$scope.sortedList = [
  A: [P1, P2],
  B: [P1, P3, P4],
  C: [P2, P5]
]

然后在 html 个文件中，我使用了 caph 视频播放器示例 (https://www.samsungdforum.com/caphdocs/main.html?type=angular&doc=demo&p1=0):

main.html中的代码：

<div id="list-category" class="list-category">
  <play-list ng-repeat="cat in categories" id="{{cat}}"></play-list>
</div>

playlist.html

中的代码

<div class="list-area" ng-class="{'list-fadeout': currentCategory !== listCategory}">
  <caph-list id="list-{{listCategory}}" container-class="list-container" items="item in sortedList[listCategory]" on-scroll-start="onScrollStart($context)" on-scroll-finish="onScrollFinish($context)" mouse-scroll-area-size="40" loop="false">
    <div id="{{listCategory}}-{{item.id}}" class="item" focusable="{depth: {{DEPTH.INDEX}}, nextFocus: {down: 'btnPlay'}}" data-focusable-initial-focus="{{$index === 0}}" on-focused="focus($event, listCategory, this, $index)" on-blurred="blur($event, listCategory, this)" on-selected="booting.show=true">
      <img ng-if="item.mainUrl" ng-src="{{item.mainUrl}}" alt="{{item.name}}" title="{{item.name}}" style="width: 300px; height: 200px;"/>
    </div>
  </caph-list>
</div>

playList 指令与示例中的完全相同。

这是我的 CSS 文件：

main.css

中的代码

.list-container {
  position: absolute;
  width: 1680px;
  height: 265px;
  overflow: hidden;
  margin-top: 0;
  padding-top: 25px;
  background-color: #e6e6e6;
}

.item {
  position: relative;
  width: 300px;
  height: 200px;
  -webkit-box-sizing: border-box;
  margin: 0 14px 0 0;
}

在index.html文件中，css包含在任何js文件之前。

然后我启动 'cordova emulate browser' 命令以在 Chrome 浏览器中查看结果，但我一直收到错误消息：

浏览器错误：

Error: The caph-list's container and template view should have their own size such as width and height.

我尝试删除 playList 指令并将 caph-list 直接与 ng-repeat 放在一起，但得到了相同的结果。

有人可以帮忙吗？

谢谢

Answer 1

我直接写信给 caph@samsung.com，他们很快就回复了： "The current version(3.1.x) of caph-list does not support nesting with ng-repeat."

我目前 re-developing 我自己使用普通 div 来获得我需要的功能。

此致

当多个列表时，caph-list 不工作

caph-list not working when more than one list

tizen

samsung-smart-tv

tizen-web-app