不在页面详细信息中显示“ion-tab”答案

【问题标题】：Not displaying "ion-tab" in page detail不在页面详细信息中显示“ion-tab”
【发布时间】：2015-08-07 15:07:13
【问题描述】：

我有一个问题，我有一个显示项目的代码，该代码将我带到一个页面，该页面显示每个项目的详细信息，但此页面没有显示“ ion -tab ”

任何帮助

谢谢

附件代码：

路由器：

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider){     
    $ionicConfigProvider.navBar.alignTitle("center");       
    $stateProvider
        .state("app",{
            templateUrl: "templates/app.html",
            url: "/app",
            abstract: true
        })
        .state("app.noticias", {
            url: "/noticias",
            views: {
                "app-noticias":{
                    templateUrl: "templates/noticias.html",
                    controller: "noticiasCtrl"
                }
            }
        })                  
        .state('forgotpassword', {
          url: "/forgot-password/:id?tit?bgd?fec?com",
          templateUrl: "templates/forgot-password.html"
        })          
        $urlRouterProvider.otherwise("/app/noticias");

})

代码：

<ion-view title="Noticias">    
    <ion-content ng-controller="noticiasCtrl" style="top:0">              
          <ion-list>
            <ion-item ng-repeat="item in rawData.slice(1, n)" class="item-noticias overlay" ng-style="{'background':'url(img/'+item.bg +') no-repeat center', 'background-size':'cover'}">                
                <div class="overlay" ui-sref="forgotpassword({ id: item.tipo, tit: item.titulo, bgd:item.bgdetail, com:item.com, fec:item.fec })">       
                    <span class="tipo">{{ item.tipo }}</span>
                    <span class="titulo">{{ item.titulo }}</span>
                    <span class="link">Leer mas <img src="img/right-arrow.png"></span>                    
                </div>                        
            </ion-item>
          </ion-list>             
      </ion-content>    
</ion-view>

页面详情：

<ion-view title="forgotpassword">
  <ion-nav-buttons side="left">
    <button class="button" ng-click="$ionicGoBack($event)"></button>
  </ion-nav-buttons>
  <ion-content ng-controller="noticiasCtrl" style="top:0">    
    <div class="header-image" ng-style="{'background':'url(img/'+bgd +') no-repeat center', 'background-size':'cover'}">
    <div class="overlayPrinD"> 
      <div class="overlayPrinSecD">                 
            <span class="tipo">{{ id }}</span>
            <span class="titulo">{{ tit }}</span>                               
      </div>                
    </div>       
  </div>
  <p class="fec">{{ fec }}</p>
  <p class="texto">{{ com }}</p>
  </ion-content>
</ion-view>

【问题讨论】：

标签： angularjs ionic-framework ionic angularjs-routing

【解决方案1】：

我没有看到您在标记中的任何位置使用 ion-tab 指令。我无法从您的问题中看出哪些视图应该在选项卡中，因此您可以使用以下通用解决方案作为示例：

// Routes
.state('dashboard.tabs', {
    url: "/tabs",
    abstract: true,
    templateUrl: "templates/tab-container.html"
})

.state('dashboard.tab1', {
    url: "/tab1",
    views: {
        'tab1-tab': {
            templateUrl: "templates/tab1.html",
            controller: 'Tab1Ctrl as vm',
        }
    }
})

.state('dashboard.tab2', {
    url: "/tab2",
    views: {
        'tab2-tab': {
            templateUrl: "templates/tabs2.html",
            controller: 'Tab2Ctrl as vm',
        }
    }
})

// Tab markup for tab-container.html template
<ion-view view-title="Some Title">
    <ion-tabs class="tabs-positive">

        <ion-tab title="Tab 1" ui-sref="some.route.item1">
            <ion-nav-view name="tab1-tab"></ion-nav-view>
        </ion-tab>

        <ion-tab title="Tab 2" ui-sref="some.route.item2">
            <ion-nav-view name="tab2-tab"></ion-nav-view>
        </ion-tab>

    </ion-tabs>
</ion-view>

// Tab1 and/or Tab2 templates
<ion-view view-title="Tab #">
    <ion-content>
        // Your content
    </ion-content>
</ion-view>

您还可以使用带有 ng-template 的脚本标签在容器模板中包含单个选项卡标记。

<script id="templates/tab1.html" type="text/ng-template">
  <ion-view view-title="Tab 1">
    <ion-content class="padding">
      <p>
        // Your content
      </p>
    </ion-content>
  </ion-view>
</script>

【讨论】：