离子应用程序 - 每个按钮中的相同内容

Posted 2023-05-09

【中文标题】离子应用程序 - 每个按钮中的相同内容

【英文标题】：Ionic app - same content in every button

【发布时间】：2017-08-23 05:29:47

【问题描述】：

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

我有这个“item.html”，这是我添加每个按钮重复的内容的地方（如下所示），如果我创建例如“item_workshops.html”，我如何指定我想要链接该页面到“研讨会”按钮？还是有其他办法？

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

提前致谢。

【问题讨论】：

你必须在你的app.js中定义新的状态

我为“item_workshop”添加了一个新状态，但是如何将它链接到工作坊按钮？

【参考方案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);
  ...
;

【讨论】：

谢谢，这就是我所缺少的。