caph-list not working when more than one list

Question

I have to display on Tizen TV several lists of products, one list by category. I am using Caph 3.1.0 with angular and Samsung TOAST.

First I connect to our server to get all our products, then using these products. Each product has one or several 'category' field, then I use the products to get categories in $scope.categories and sorted products in $scope.sortedList like the following:

Code in controller.js

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

Then in html files, I used caph video player sample (https://www.samsungdforum.com/caphdocs/main.html?type=angular&doc=demo&p1=0):

Code in main.html:

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

Code in 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>

The playList directive is quite the same as in the sample.

And here is my CSS file:

Code in 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;
}

In index.html file, css is included before any js file.

Then I launch 'cordova emulate browser' command to see the result in Chrome browser but I keep getting the error:

Error in browser:

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

I tried removing the playList directive and putting caph-list directly with the ng-repeat but got the same result.

Could anyone please help?

Thanks

Answer 1

I wrote directly to [email protected] and they answered quite quickly: "The current version(3.1.x) of caph-list does not support nesting with ng-repeat."

I am currently re-developing the whole thing myself with common divs to get the functionalities I need.

Regards