Question

我已经下载了这个免费模板：git，并尝试添加一些内容，但内容会针对每个按钮重复，我无法找到向不同按钮添加不同内容的解决方案。

我有这个＆＃34; item.html＆＃34;这是我为每个按钮添加重复内容的地方（如下所示），如果我创建了例如＆＃34; item_workshops.html＆＃34;，我该如何指定我希望该页面链接到＆＃34;车间＆＃34;按钮？或者还有其他方式吗？

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（控制器）

(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（控制器）

    (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（控制器）

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

提前致谢。

Answer 1

在gallery.js中为您想要的州创建一个条件，

例如：

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

离子应用程序 - 每个按钮

1 个答案: