我想在Ionic项目的每个导航视图的标题栏中出现一个"帮助图标"按钮。为此,我在index.html页面中包含了以下内容:
<ion-nav-view>
<ion-header-bar>
<div class="row">
<div class="col col-10 col-offset-90">
<div class="buttons">
<button class="button" ng-click="doSomthing()"><i class="ion-help-circled"></i></button>
</div>
</div>
</div>
</ion-header-bar>
</ion-nav-view>
我想要的帮助按钮按预期出现在每个视图中,但是不可点击。我猜它必须在离子导航视图中对自身进行分层?
我尝试过的事情:
- 将按钮包裹在锚中
- 删除行和栏位
注意:我在其他视图中也有离子标题栏,所以我可以显示页面标题。这对按钮有影响吗?按钮仍然出现,但在任何地方都不是交互式的。
关于为什么按钮不可点击的任何帮助/评论都非常感谢。
编辑:所以经过更多的测试,我已经缩小了我的问题。问题在于我的index.html文件中的以下代码:
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
这个导航栏似乎与标题栏重叠。由于"后退按钮"的实现,这段代码是必不可少的。删除此代码块返回帮助图标按钮的功能。
我知道我做错了什么。ion-header-bar
不能排在ion-nav-bar
之后。这样做会导致它重叠而不具有互动性。将按钮添加到ion-nav-bar
本身解决了这个问题。下面的代码可以完美地工作,并在所有视图上显示按钮:
<ion-nav-bar>
<ion-nav-back-button>
<i class="icon ion-ios-arrow-left"></i>
</ion-nav-back-button>
<ion-nav-buttons side="right">
<a ui-sref="url.path.tohelp" class="button icon ion-ios-help"></a>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view>
</ion-nav-view>