当用户在你的app中浏览时，ionic能够检测到浏览历史。通过检测浏览历史，实现向左或向右滑动时可以正确转换视图。
采用AngularUI路由器模块等应用程序接口可以分为不同的$state(状态)。Angular的核心为路由服务，URLs可以用来控制视图。
AngularUI路由提供了一个更强大的状态管理，即状态可以被命名，嵌套， 以及合并视图，允许一个以上模板呈现在同一个页面。
此外，每个状态无需绑定到一个URL，并且数据可以更灵活地推送到每个状态。
以下实例中，我们将创建一个应用程序中包含不同状态的导航视图。
我们的标记中选择ionNavView作为顶层指令。显示一个页眉栏我们用 ionNavBar 指令通过导航更新。
接下来，我们需要设置我们的将渲染的状态值。
var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider) {
$stateProvider
.state('index', {
url: '/',
templateUrl: 'home.html'
})
.state('music', {
url: '/music',
templateUrl: 'music.html'
});
});
再打开应用，$stateProvider 会查询url, 看是否匹配 index 状态值, 再加载index.html到<ion-nav-view>。
页面加载都是通过URLs配置的。在Angular中创建模板最一个简单的方式就是直接将他放到html模板文件中并且用<script type="text/ng-template"> 包含。
所以这也是一种方式将Home.html加入到我们的APP中来：
<script id="home" type="text/ng-template">
<!-- ion-view 标题将显示在 navbar 中 -->
<ion-view view-title="Home">
<ion-content ng-controller="HomeCtrl">
<!-- The content of the page -->
<a href="#/music">Go to music page!</a>
</ion-content>
</ion-view>
</script>
这是一个很好的方法，因为模板会很快的加载并被缓存就不同通过网络再去加载。
通常情况下，视图都被缓存了能提升性能。当跳出视图时，他的元素被保留在Dom中，并且它的作用域也从 $watch 中移除。
当我们跳到一个已经被缓存了的视图，视图会被激活，它的作用域被重新连接上，Dom中也保存了他的元素。这也允许保持以前的视图滚动位置。
缓存也可以通过很多方式来开启和关闭的。默认Ionic将最大缓存页面数为10个，并且这并不是唯一可以定制的，应用程序可以显式状态来设置视图应不应该被缓存。
注意，因为我们是缓存这些视图，我们没有破坏作用域。相反, 它的作用域也从 $watch 中移除。
因为接下来的观看作用域并没有被摧毁和重建，控制器也没被再次加载。如果app/controller需要知道什么时候进入或离开一个视图，再视图事件从 ionView 作用内发出, 例如 $ionicView.enter， 可能是有用的。
$ionicConfigProvider 可以用于设置最大允许缓存的视图数量，通过设置为0来禁用所有缓存。
$ionicConfigProvider.views.maxCache(0);
$stateProvider.state('myState', {
cache: false,
url : '/myUrl',
templateUrl : 'my-template.html'
})
<ion-view cache-view="false" view-title="My Title!"> ... </ion-view>
请访问 AngularUI Router's docs 了解更多。
| 属性 | 类型 | 详情 |
|---|---|---|
|
name
|
字符串
|
一个视图的名字。这个名字应该是在相同的状态下其他视图中唯一的。你可以在不同的状态中有相同名称的视图。欲了解详细信息，查看ui-router的 ui-view 文档。 |
隶属于ionNavView。 一个内容的容器，用于展示视图或导航栏信息。
下面是一个带有"我的页面"标题的导航栏载入页面的例子。
<ion-nav-bar></ion-nav-bar>
<ion-nav-view class="slide-left-right">
<ion-view title="我的页面">
<ion-content>
你好!
</ion-content>
</ion-view>
</ion-nav-view>
| 属性 | 类型 | 详情 |
|---|---|---|
|
title
|
字符串
|
显示在父 |
|
hide-back-button
|
布尔值
|
默认情况下，是否在父 |
|
hide-nav-bar
|
布尔值
|
默认情况下，是否隐藏父 |
创建一个顶部工具栏，当程序状态改变时更新。
<body ng-app="starter"> <!-- 当我们浏览时，导航栏会随之更新。 --> <ion-nav-bar class="bar-positive nav-title-slide-ios7"> </ion-nav-bar> <!-- 初始化时渲染视图模板 --> <ion-nav-view></ion-nav-view> </body>
| 属性 | 类型 | 详情 |
|---|---|---|
|
delegate-handle
|
字符串
|
该句柄用 |
|
align-title
|
字符串
|
导航栏标题对齐的位置。可用： 'left', 'right', 'center'。 默认为 'center'。 |
隶属于ionNavView
在ionView内的ionNavBar上用ionNavButtons设置按钮。
你设置的任何按钮都将被放置在导航栏的相应位置，当用户离开父视图时会被销毁。
<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
<ion-view>
<ion-nav-buttons side="left">
<button class="button" ng-click="doSomething()">
我是一个在导航栏左侧的按钮！
</button>
</ion-nav-buttons>
<ion-content>
这里是一些内容！
</ion-content>
</ion-view>
</ion-nav-view>
| 属性 | 类型 | 详情 |
|---|---|---|
| side |
字符串
|
在父 |
在一个ionNavBar中创建一个按钮。
当用户在当前导航能够后退时，将显示后退按钮。
默认按钮动作:
<ion-nav-bar>
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> 后退
</ion-nav-back-button>
</ion-nav-bar>
自定义点击动作，用 $ionicNavBarDelegate:
<ion-nav-bar ng-controller="MyCtrl">
<ion-nav-back-button class="button-clear"
ng-click="canGoBack && goBack()">
<i class="ion-arrow-left-c"></i> 后退
</ion-nav-back-button>
</ion-nav-bar>
function MyCtrl($scope, $ionicNavBarDelegate) {
$scope.goBack = function() {
$ionicNavBarDelegate.back();
};
}
在后退按钮上显示上一个标题，也用$ionicNavBarDelegate。
<ion-nav-bar ng-controller="MyCtrl">
<ion-nav-back-button class="button-icon">
<i class="icon ion-arrow-left-c"></i>{{getPreviousTitle() || 'Back'}}
</ion-nav-back-button>
</ion-nav-bar>
function MyCtrl($scope, $ionicNavBarDelegate) {
$scope.getPreviousTitle = function() {
return $ionicNavBarDelegate.getPreviousTitle();
};
}
nav-clear一个当点击视图上的元素时用到的属性指令，比如一个 <a href> 或者一个 <button ui-sref>。
当点击时，nav-clear将会导致给定的元素，禁止下一个视图的转换。这个指令很有用，比如，侧栏菜单内的链接。
下面是一个侧栏菜单内添加了nav-clear指令的一个链接。点击该链接将禁用视图间的任何动画。
<a nav-clear menu-close href="#/home" class="item">首页</a>
ion-nav-title 用于设置 ion-view 模板中的标题。
<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
<ion-view>
<ion-nav-title>
<img decoding="async" src="logo.svg">
</ion-nav-title>
<ion-content>
Some super content here!
</ion-content>
</ion-view>
</ion-nav-view>
设置使用的过渡类型，可以是：ios, android, 和 none。
<a nav-transition="none" href="#/home">Home</a>
设置导航视图中过渡动画的方向，可以是forward, back, enter, exit, swap。
<a nav-direction="forward" href="#/home">Home</a>
授权控制 ion-nav-bar 指令。
<body ng-controller="MyCtrl">
<ion-nav-bar>
<button ng-click="setNavTitle('banana')">
Set title to banana!
</button>
</ion-nav-bar>
</body>
function MyCtrl($scope, $ionicNavBarDelegate) {
$scope.setNavTitle = function(title) {
$ionicNavBarDelegate.title(title);
}
}
align([direction])
在浏览历史中后退。
| 参数 | 类型 | 详情 |
|---|---|---|
|
event
|
DOMEvent
|
事件对象（如来自点击事件） |
align([direction])
带有按钮的标题对齐到指定的方向。
| 参数 | 类型 | 详情 |
|---|---|---|
|
direction
|
字符串
|
标题文字对齐的方向。可用: 'left', 'right', 'center'。 默认: 'center'。 |
返回值: 布尔值， 后退按钮是否显示。
showBar(show)
设置或获取 ion-nav-bar 是否显示。
| 参数 | 类型 | 详情 |
|---|---|---|
| show |
布尔值
|
导航栏是否显示。 |
返回值: 布尔值， 导航栏是否显示。
showBackButton([show])
设置或获取 ion-nav-back-button 是否显示。
| 参数 | 类型 | 详情 |
|---|---|---|
|
show
|
布尔值
|
是否显示后退按钮 |
title(title)
为ion-nav-bar设置标题。
| 参数 | 类型 | 详情 |
|---|---|---|
| title |
字符串
|
显示新标题。 |
$ionicHistory 用于跟踪用户在 app 内的浏览记录。
viewHistory()
用于查看历史记录。
currentView()
app 的当前视图。
currentHistoryId()历史堆栈的 ID，是当前视图的父类容器。
currentTitle([val])
获取或设置当前视图的标题。
backView()
返回上次浏览的视图。
backTitle()
获取上次浏览的视图的标题。
forwardView()
返回历史堆栈中当前视图的上一个视图。
currentStateName()
返回当前状态名。
goBack([backCount])
app 回退视图，如果回退的视图存在。
我正在尝试将全局导航菜单项添加到我的ActiveAdmin安装(在“仪表板”导航按钮旁边)。ActiveAdmin说这在他们的网站上是可能的，但他们没有任何关于如何实现它的文档。有谁知道如何做到这一点？编辑:抱歉，我应该更清楚。我想添加一个指向由任意文本/链接对组成的全局导航的链接。IE，如果我想添加一个链接到http://google.com在事件管理员的全局导航中使用文本“Google”，我将如何实现？ 最佳答案 ActiveAdmin.register_page"Google"domenu:priority=>1,:label
伴随农业机械化和智能化的发展，越来越多的人开始使用农机自动驾驶系统助力耕作，千耘农机导航的“星地一体”能力可有效解决信号受限的问题，实现作业提效。究竟什么是“星地一体”，又是如何解决智能化农机作业的痛点的？下面为大家揭秘。农机效率通常受限于通信网络目前虽然我国通讯网络的人口覆盖率达到99%，但地面移动通讯网络覆盖率仍小于国土面积的40%，而很多农田所在区域恰是山区、戈壁滩等偏远地区。两省交界地也会出现通信信号不稳定的状况；而国内大部分农机自动驾驶系统非常依赖通信网络，当通信网络弱的时候会出现系统掉线的现象，必须得携带小基站才能正常使用，极为繁琐。Q:什么是千耘农机导航“星地一体”能力？A:是星
在railsadmin中，您可以像这样为模型及其子项定义导航标签:#inrails_admin.rbconfig.modelOrderdonavigation_label'Ordersrelated'endconfig.modelOrderProductsdoparentOrderend有没有办法在不创建模型的情况下向导航菜单添加标签(即仅用于分组)？ 最佳答案 根据wiki，您可以像这样将静态链接附加到导航:RailsAdmin.configdo|config|config.navigation_static_links={'Go
Ruby2.3.0引入了安全导航语法，它通过引入一个新的运算符来简化链式方法调用的nil处理，该运算符仅在先前语句的值不是nil。这是一个已经存在于C#、Groovy和Swift中的特性。例如inGroovy,语法是foo?.bar这基本上意味着结果值是foo.bar除非foo是null，在这种情况下返回值也是null因此不会抛出异常。还有C#(称为空条件运算符)和Swift(称为可选链接表达式)使用此表示法。所以语法在其他语言中似乎是相当标准的。现在，为什么在Ruby中语法是foo&.bar代替？ 最佳答案 此答案基于thedis
我只是习惯了Middleman和一般的ruby。生成具有事件状态的导航的最佳方式是什么？ 最佳答案 在当前版本的MM(2.x，尽管3.0接近)中，您可以通过向config.rb添加以下内容并在您的导航文件中进行一些调整来实现。这是aworkingversion以防我遗漏一些关键位:首先创建一个辅助函数:helpersdodefnav_active(page)@page_id==page?{:class=>"Active"}:{}endend然后，在navbarincludefile(在本例中它是一个haml文件)您可以使用nav_a
我主要将RubyMine用于Cucumber/Ruby，现在，我开始使用VSCode，使用它可以运行和调试测试用例。我找不到从功能导航到步骤定义的方法。我尝试搜索扩展程序，但cucumber-step-mapper没有帮助。是否有任何配置可以实现从功能到步骤定义的导航？ 最佳答案 您可以安装Cucumber(Gherkin)FullSupport来自VSCodeMarketplace的扩展:安装完成后，重新加载VSCode。现在为了使其适用于Ruby，您需要:按Ctrl+,打开用户设置向下滚动到CucumberAutoComplet
我有一个Ruby/Rails应用程序，它有两个或三个主要“部分”。当用户访问该部分时，我希望显示一些子导航。所有三个部分都使用相同的布局，因此我无法将导航“硬编码”到布局中。我可以想到几种不同的方法来做到这一点。我想为了帮助人们投票，我会把它们作为答案。还有其他想法吗？或者你投票给什么？ 最佳答案 假设每个部分都有自己的Controller，您可以使用partials轻松地做到这一点。假设您有三个部分，分别称为Posts、Users和Admin，每个部分都有自己的Controller:PostsController、UsersCon
我把binding.pry放在我的脚本中，但是现在当它停在断点处时，是向我显示该信息。出乎我的意料，如何解决？帧数:0/11From:/Users/me/.rbenv/versions/2.1.2/lib/ruby/gems/2.1.0/gems/pry-nav-0.2.4/lib/pry-nav/tracer.rb@line21PryNav::Tracer#run:12:defrun(&block)13:#Forperformance,disableanytracerswhileintheconsole.14:#Unfortunatelydoesn'tworkin1.9.2becau
我目前有一段代码如下:ifmatch=request.path.match(/\A\/(?(?!admin|assets)\w+)/)match[:slug]end有没有办法使用安全导航运算符(在2.3.0中引入)来避免这种if条件？ 最佳答案 只需使用普通(无糖)形式即可。request.path.match(/\A\/(?(?!admin|assets)\w+)/)&.[](:slug) 关于ruby-在Ruby中将[]与安全导航运算符一起使用，我们在StackOverflow上找到
我对我的面包屑解决方案有点不自信。名称和链接在每个Controller操作中定义:Home>">>">这样我可以使用:@l1_link=user_path()问题:因为我没那么聪明-这种系统会在未来的某个地方导致灾难吗？这(严重)效率低下吗？ 最佳答案 面包屑菜单是大多数Rails应用程序中经常出现的模式。为了解决这个问题，我创建并发布了一个名为breadcrumbs_on_rails的插件。.您在Controller中定义面包屑classMyControlleradd_breadcrumb"home",root_pathadd_b