Ionic app - same content in every button

Question

I've downloaded this free template: git, and tried to add some content, but the content repeats for every button and i can't find a solution to add different content to different buttons.

I have this "item.html" which is where I add the content that repeats for every button (as shown below), if I create for example "item_workshops.html", how do I specify that i want that page linked to the "workshops" button? Or there is any other way?

item.html

<ion-view class="itemView" view-title="{{item.title}}" ng-style="{ 'background-color': item.color }">
  <ion-content class="center-content animated slideInUp" overflow-scroll="true">

  <i class="ion-ionic" style="font-size:22em;color:white;"></i>
    <header>
      <p></p>
        <p>
          <h10>PROGRAMA<p>&nbsp;</p></h10>
        </p>
      </header>

<!-- I want this to be linked to the "workshops" button -->
  <i class="ion-ios-alarm" style="font-size:22em;color:white;"></i>
    <header>
      <p></p>
        <p>
          <h10>Workshops<p>&nbsp;</p></h10>
        </p>
      </header>

  </ion-content>
</ion-view>

item.js (controller)

(function() {
'use strict';

    angular
        .module('App')
        .controller('ItemController', ItemController);

    ItemController.$inject = ['$scope', '$stateParams', '$ionicViewSwitcher', '$state', '$ionicHistory'];
    function ItemController($scope, $stateParams, $ionicViewSwitcher, $state, $ionicHistory) {

        $scope.item = {
            title: $stateParams.title,
            icon: $stateParams.icon,
            color: $stateParams.color
        };

        if (!$scope.item.color) {
            $ionicViewSwitcher.nextDirection('back');
            $ionicHistory.nextViewOptions({
                disableBack: true,
                disableAnimate : true,
                historyRoot  : true
            });
            $state.go('app.gallery');
        }
    }
})();

app.js (controller)

    (function () {
        'use strict';

        angular
            .module('App')
            .controller('AppController', AppController);

        AppController.$inject = ['$scope', '$ionicPopover'];
        function AppController($scope, $ionicPopover) {

            $scope.items = [
                {
                    color: "#3a3a3a",
                    icon: "ion-ionic",
                    title: "Programa"
                },
                {
                    color: "#536582",
                    icon: "ion-ios-alarm",
                    title: "Workshops"
                }
//removed the other buttons to minimize the code
            ];
        }
    })();

gallery.js (controller)

(function() {
'use strict';

    angular
        .module('App')
        .controller('GalleryController', GalleryController);

    GalleryController.$inject = ['$scope', '$state'];
    function GalleryController($scope, $state) {

        $scope.openItem = function(item){
            $state.go('app.item', { title: item.title, icon: item.icon, color: item.color });
        };
    }
})();

app.js

$stateProvider
    .state('app', {
        url: '/app',
        abstract: true,
        controller: 'AppController',
        templateUrl: 'templates/menu.html'
    })
    .state('app.gallery', {
        url: "/gallery",
        cache: false,
        views: {
            viewContent: {
                templateUrl: "templates/gallery.html",
                controller: 'GalleryController'
            }
        }
    })
    .state('app.item', {
        url: "/item/{title}",
        params: {
            color: null,
            icon: null
        },
        cache: false,
        views: {
            viewContent: {
                templateUrl: "templates/item.html",
                controller: 'ItemController'
            }
        }
    });

Thanks in advance.

Answer 1

In the gallery.js create a condition for the state you want to go,

for example:

$scope.openItem = function(item){
 if(item.title == "Workshop")
    $state.go('app.workshop', { title: item.title});
 else if(item.title == "Videos")
     $state.go('app.videos', { title: item.title});
  ...
};