離子性和角度性：帶有選項卡的應用程序上的路線

Question

我有點想這樣：我有一個帶有選項卡的離子應用程序。 基本的。 在我的一個標簽中，我想要一個主詳細信息列表。 我有一個列表，我希望在單擊某個項目時出現一個新頁面。 簡單。 但是我想我有點弄亂了路線，我正在為此打轉。

<body ng-app="ionicApp">

    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>


    <script id="templates/tabs.html" type="text/ng-template">
      <ion-tabs class="tabs-icon-top tabs-positive">

        <ion-tab title="Carte" icon="ion-map" href="#/tab/map">
          <ion-nav-view name="map-tab"></ion-nav-view>
        </ion-tab>

        <ion-tab title="Compte" icon="ion-person" href="#/tab/account">
          <ion-nav-view name="account-tab"></ion-nav-view>
        </ion-tab>

        <ion-tab title="Favorite" icon="ion-ios-cart" href="#/tab/favorite">
          <ion-nav-view name="favorite-tab"></ion-nav-view>
        </ion-tab>

        <ion-tab title="Cave" icon="ion-ios-wineglass" ui-sref="tabs.cave">
          <ion-nav-view name="cave-tab"></ion-nav-view>
        </ion-tab>

      </ion-tabs>
    </script>

    <script id="templates/map.html" type="text/ng-template">
          [...]
    </script>

    <script id="templates/account.html" type="text/ng-template">
          [...]
    </script>

    <script id="templates/favorite.html" type="text/ng-template">
          [...]
    </script>

    <script id="templates/nav-stack.html" type="text/ng-template">
      <ion-view view-title="Tab Nav Stack">
        <ion-content class="padding">
          <p><img src="http://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p>
        </ion-content>
      </ion-view>
    </script>

    <script id="templates/cave.html" type="text/ng-template">
      <ion-view title="Cave">
        <ion-content>
          <div class="list" ng-controller="CaveCtrl">
            <a ng-repeat="wine in wines"
               class="item item-thumbnail-left"
               ui-sref=" tabs.cave.wine({ wineId: wine.id })" >

              <img ng-src="{{ wine.image }}">
              <h2>{{ wine.name }}</h2>
              <h3>{{ wine.year }}</h3>
              <p>{{ wine.appellation }}</p>
            </a>
          </div>
        </ion-content>
      </ion-view>
    </script>

    <script id="wine.html" type="text/ng-template">
      <ion-header-bar class="bar bar-header bar-dark">
        <h1 class="title">Wine details</h1>
      </ion-header-bar>
      <ion-content>
        <h1>HI IT'S WORKING</h1>
      </ion-content>
    </script> 
</body>

我的app.js中有路線：

.state('tabs.cave', {
      url: "/cave",
      views: {
        'cave-tab': {
          templateUrl: "templates/cave.html"
        }
      }
    })
    .state('wine', {
      url: 'tab/cave/:wineId',
      templateUrl: 'wine.html',
      controller: 'WineCtrl'
    });


  $urlRouterProvider.otherwise("/tab/account");

和一些控制器：

App.controller('CaveCtrl', function($scope, $location) {
  $scope.wines = [
    { id: 1, year:'2010', appellation: 'saint-julien', name: 'Saint Julien du médoc', image:'img/Saint-Julien.png'},
    { id: 2, year:'2013', appellation: 'bordeaux', name: 'Seigneur de Paludate', image:'img/Seigneur-Paludate.jpg'},
    { id: 3, year:'2011', appellation: 'jurançon', name: 'Uroula', image:'img/Uroula.jpg'}
  ];
});

App.factory('Wines', function () {
  var wines = [
    { id: 1, year:'2010', appellation: 'saint-julien', name: 'Saint Julien du médoc', image:'img/Saint-Julien.png'},
    { id: 2, year:'2013', appellation: 'bordeaux', name: 'Seigneur de Paludate', image:'img/Seigneur-Paludate.jpg'},
    { id: 3, year:'2011', appellation: 'jurançon', name: 'Uroula', image:'img/Uroula.jpg'}
  ]
  return {
    getById : function (id) {
      return wines[ wines.lastIndexOf(id) ]
    }
  }
});

App.controller('WineCtrl', function($scope, $http, $stateParams, Wines) {

  console.log(Wines);
});

任何想法都很好:)預先謝謝

Answer 1

嘗試：

<a ng-repeat="wine in wines"
   class="item item-thumbnail-left"
   ui-sref="wine({ wineId: wine.id })" >

src： Ui-sref在離子框架中未生成正確的URL

離子性和角度性：帶有選項卡的應用程序上的路線

問題描述

1 個解決方案

解決方案1
0 已采納 2016-05-11 15:15:34

離子性和角度性：帶有選項卡的應用程序上的路線

問題描述

1 個解決方案

解決方案1 0 已采納 2016-05-11 15:15:34

解決方案1
0 已采納 2016-05-11 15:15:34