Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/24.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/ionic-framework/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angularjs ionic中的选项卡未显示内容_Angularjs_Ionic Framework_Ionic - Fatal编程技术网

Angularjs ionic中的选项卡未显示内容

Angularjs ionic中的选项卡未显示内容,angularjs,ionic-framework,ionic,Angularjs,Ionic Framework,Ionic,我正在努力展示自己的内容。我在自定义模板文件中手动添加了自定义代码 <ion-content> <ion-tabs class="tabs-positive tabs-icon-only"> <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline"> My Content here </ion-tab> <

我正在努力展示自己的内容。我在自定义模板文件中手动添加了自定义代码

  <ion-content>


<ion-tabs class="tabs-positive tabs-icon-only">

  <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
    My Content here 
  </ion-tab>

  <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
     My Content here 1
  </ion-tab>

  <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
    My Content here 3
  </ion-tab>

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


我的内容在这里
我在这里的内容1
我的内容在这里3
我从这里获取了示例代码

我可以看到标签,但看不到内容。是的,如果我遵循爱奥尼亚的示例应用程序标签,我就能做到这一点。但我需要一个以上的


我们可以在这里显示内容吗

如果仔细研究该示例,您会发现,每个选项卡条目都包含一个
ion导航视图
,每个
nav视图
实际上是一个
ion视图
,具有指定其内容的
ion内容

在您的代码中,选项卡元素被包装在一个
ion content
中,这实际上是相反的方式

下面是一个稍微简化的示例

您必须使用视图来加载tabs指令中的内容。路由状态使用视图的名称来放置将驻留在选项卡中的内容

// Notice the referenced view is "home-tab"
.state('tabs.home', {
  url: "/home",
  views: {
    'home-tab': {
      templateUrl: "templates/home.html",
      controller: 'HomeTabCtrl'
    }
  }
})

// Which correlates to the name of the view, which is also "home-tab"
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
  <ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
//注意,引用的视图是“主页选项卡”
.state('tabs.home'{
网址:“/home”,
观点:{
“主页选项卡”:{
templateUrl:“templates/home.html”,
控制器:“HomeTabCtrl”
}
}
})
//它与视图的名称相关,也就是“主选项卡”
您可以使用模板轻松地将其添加到同一文件中(如示例中所示),该模板使用路由的templateUrl与标记中模板的id相关联:

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


//你的内容


有关在ionic中设置选项卡的详细信息,请参阅。

yes。。但我不想使用离子导航视图。在上面的例子中无法完成我可以吻你,这个问题已经困扰了几个小时,你的回答帮助解决了我的问题。你能尝试将ion选项卡中的内容包装到div或某个元素(我的内容在这里1)中吗?看起来有些类被添加到了ion选项卡的子元素中。你也可以尝试不带离子标题栏,如果它在那里,我试过这个。仍然不起作用