ionic and angular : routes on an app with tabs

Question

I'm kinda tearing my hair out with that: I have an ionic app with tabs. Basic. And in one of my tabs I would like a master detail list. I have a list and I want a new page to appear when I click on an item. Simple. BUT I guess I kinda mess up with routes and I'm spining around with this.

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

There are routes in my 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");

And some controllers :

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);
});

Any ideas would be nice :) thank you in advance

Answer 1

Try :

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

src : Ui-sref is not generating the right url in ionic framework

ionic and angular : routes on an app with tabs

Question

1 answers

solution1
0 ACCPTED 2016-05-11 15:15:34

ionic and angular : routes on an app with tabs

Question

1 answers

solution1 0 ACCPTED 2016-05-11 15:15:34

solution1
0 ACCPTED 2016-05-11 15:15:34