带有 json 的温泉轮播和模板答案

【问题标题】：Onsen carousel & template with json带有 json 的温泉轮播和模板
【发布时间】：2015-11-04 14:38:14
【问题描述】：

我有一个 Onsen-UI 模板/索引，其中有一个轮播，并且每个轮播项都调用一个 ons-template id (html)。其中一个模板调用 ng-controller（调用 json api），并且其中包含常用的 javascript。

如果我在 Chrome 中查看 index.html，列表会显示，但是当我将其构建为 phonegap 应用程序并在我的 android 设备上运行 apk 时，列表永远不会出现。它只是在循环中加载而没有“加载”它。

此外，当我单击列表项时，它应该将我带到另一个 html 模板以显示正确的信息和位置 (page.html)，这是 Chrome 不做的（可能只是 chrome 中的一个问题）。

我希望如果我让列表显示在我的应用程序上，那么第二部分会自行修复还是我需要做一些额外的调整？

这是我调用控制器的模板代码：

<ons-template id="news.html">
    <ons-page>
         <div class="app-page opacity-bar">

    <div class="app-page-content">
   <div class="app-page news-page" ng-controller="newsController" data-ng-init="getAllRecords()">

      <ons-list modifier="news">

        <ons-list-item modifier="chevron" class="list-item-container" ng-repeat="item in items" ng-click="showPost($index)">
          <ons-row>
            <ons-col width="95px">
              <img ng-show="{{ item.thumbnail_images }}" ng-src="{{ item.thumbnail_images.thumbnail.url }}" class="thumbnail">
            </ons-col>
            <ons-col>
              <div class="name">
            {{ item.title | limitTo: 15 }}...
              </div>
              <div class="location" ng-show="{{ item.categories }}">
                <i class="ion-pricetags"></i> <span ng-repeat="cat in item.categories">{{cat.title}} </span>
              </div>
              <div class="desc">
            {{ item.excerpt | htmlToPlaintext | limitTo: 60 }}...                
              </div>
            </ons-col>
            <ons-col width="40px"></ons-col>
          </ons-row>
        </ons-list-item>

      </ons-list>

      <ons-button id="moreButton" modifier="large" should-spin="{{isFetching}}" ng-click="nextPage()">more news</ons-button>

    </div></div></div>
    </ons-page>
</ons-template>

【问题讨论】：

标签： angularjs onsen-ui

【解决方案1】：

轮播很弱，执行不好，我也有同样的问题，支持为NULL

【讨论】：

【解决方案2】：

这个link可能对你有帮助，请检查代码

  <ons-page>
    <ons-toolbar>
      <div class="center">Carousel</div>
    </ons-toolbar>
    <ons-carousel ng-controller="CarouselController" swipeable auto-scroll fullscreen var="carousel">
      <ons-carousel-item style="background-color: gray;">
        <div class="item-label">GRAY</div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #085078;">
        <div class="item-label">BLUE</div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #373B44;">
        <div class="item-label">DARK</div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #D38312;">
        <div class="item-label">ORANGE</div>
      </ons-carousel-item>
      <ons-carousel-cover>
        <div class="bullets">
          <span 
            ng-repeat="idx in indices"
            ng-class="{'active': idx === carousel.getActiveCarouselItemIndex()}">
            •
          </span>
        </div>
      </ons-carousel-cover>

    </ons-carousel>
  </ons-page>

【讨论】：