이온 항법

ion-nav-view

사용자가 앱을 탐색할 때 ionic은 탐색 기록을 감지할 수 있습니다. 검색 기록을 감지하면 왼쪽이나 오른쪽으로 스와이프할 때 보기를 올바르게 전환할 수 있습니다.

AngularUI 라우터 모듈과 같은 애플리케이션 인터페이스를 사용하면 여러 $state로 나눌 수 있습니다. Angular의 핵심은 라우팅 서비스이며 URL을 사용하여 뷰를 제어할 수 있습니다.

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.html을 <ion-nav-view>에 로드합니다.

페이지 로딩은 URL을 통해 구성됩니다. Angular에서 템플릿을 만드는 가장 쉬운 방법은 템플릿을 html 템플릿 파일에 직접 넣고 <script type="text/ng-template"w>로 포함하는 것입니다.

이것은 또한 Home.html을 우리 앱에 추가하는 방법이기도 합니다:

<script id="home" type="text/ng-template">
  <!-- The title of the ion-view will be shown on the 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>

템플릿이 네트워크를 통해 빠르게 로드되고 캐시되기 때문에 이것은 좋은 방법입니다. 다시 로드하러 가세요.

Caching

일반적으로 뷰는 성능 향상을 위해 캐시됩니다. 뷰 밖으로 나갈 때 해당 요소는 DOM에 유지되고 해당 범위는 $watch에서 제거됩니다.

캐시된 뷰로 점프하면 뷰가 활성화되고 해당 효과가 다시 연결되며 해당 요소가 Dom에 저장됩니다. 또한 이전 보기 스크롤 위치를 유지할 수 있습니다.

캐시는 다양한 방법으로 켜고 끌 수도 있습니다. 기본적으로 Ionic은 최대 10개의 페이지를 캐시하며, 이것이 사용자 정의할 수 있는 유일한 것은 아닙니다. 애플리케이션은 뷰를 캐시해야 하는지 여부를 설정하기 위해 명시적인 상태를 설정할 수 있습니다.

우리는 이러한 뷰를 캐싱하기 때문에 뷰를 삭제하지 않고 $watch에서도 해당 뷰를 제거합니다.

이후의 보기 범위가 파괴되고 재구성되지 않기 때문에 컨트롤러는 다시 로드되지 않습니다. 앱/컨트롤러가 언제 뷰에 들어가고 나갈지 알아야 하는 경우 $ionicView.enter와 같은 ionView 함수 내에서 뷰 이벤트를 내보내는 것이 유용할 수 있습니다.

전역적으로 캐싱 비활성화

$ionicConfigProvider를 사용하면 모든 캐싱을 비활성화하려면 0으로 설정하여 캐시할 수 있는 최대 보기 수를 설정할 수 있습니다.

$ionicConfigProvider.views.maxCache(0);

STATE PROVIDER에서 캐시 비활성화

$stateProvider.state('myState', {
   cache: false,
   url : '/myUrl',
   templateUrl : 'my-template.html'
})

속성을 통해 캐시 비활성화

<ion-view cache-view="false" view-title="My Title!">
  ...
</ion-view>

AngularUI 라우터

자세한 내용은 AngularUI 라우터 문서를 참조하세요.

API

Properties	Type	Details
name (선택 사항)	`String字符串`	一个视图的名字。这个名字应该是在相同的状态下其他视图中唯一的。你可以在不同的状态中有相同名称的视图。欲了解详细信息，查看ui-router的 ui-view 文档。

ion-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>

API

属性	类型	详情
title (可选)	`字符串`	显示在父`ionNavBar`的标题。
hide-back-button (可选)	`布尔值`	默认情况下，是否在父`ionNavBar`隐藏后退按钮。
hide-nav-bar (可选)	`布尔值`	默认情况下，是否隐藏父`ionNavBar`。

ion-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>

API

属性类型详情

属性	类型	详情
delegate-handle (可选)	`字符串`	该句柄用`$ionicNavBarDelegate`标识此导航栏。
align-title (可选)	`字符串`	导航栏标题对齐的位置。可用： 'left', 'right', 'center'。默认为 'center'。

delegate-handle

(可选)

字符串

该句柄用$ionicNavBarDelegate标识此导航栏。

align-title

(可选)

字符串

导航栏标题对齐的位置。可用： 'left', 'right', 'center'。默认为 'center'。

ion-nav-buttons

隶属于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>

API

属性类型详情

side

属性	类型	详情
side	`字符串`	在父`ionNavBar` 이름 보기. 이 이름은 동일한 상태의 다른 보기 중에서 고유해야 합니다. 다른 상태에서 동일한 이름을 가진 뷰를 가질 수 있습니다. 자세한 내용은 ui-router에 대한 ui-view 설명서를 확인하세요.

字符串

在父ionNavBar

이름 보기. 이 이름은 동일한 상태의 다른 보기 중에서 고유해야 합니다. 다른 상태에서 동일한 이름을 가진 뷰를 가질 수 있습니다. 자세한 내용은 ui-router에 대한 ui-view 설명서를 확인하세요.

🎜

ion-view

ionNavView와 제휴되었습니다. 보기 또는 탐색 모음 정보를 표시하는 데 사용되는 콘텐츠의 컨테이너입니다. 🎜

다음은 "내 페이지"라는 제목의 탐색 표시줄 로딩 페이지의 예입니다. 🎜

<ion-nav-bar>
  <ion-nav-back-button class="button-clear">
    <i class="ion-arrow-left-c"></i> 后退
  </ion-nav-back-button>
</ion-nav-bar>

🎜API🎜🎜🎜🎜🎜Attributes🎜🎜Type🎜🎜Details🎜🎜🎜🎜🎜🎜title🎜🎜(선택 사항)🎜🎜🎜🎜String🎜🎜< p>부모 제목에 표시 ionNavBar. 🎜🎜🎜🎜🎜hide-back-button🎜🎜(선택 사항)🎜🎜🎜🎜Boolean🎜🎜

상위 ionNavBar가 기본적으로 뒤로 버튼으로 숨겨져 있는지 여부. 🎜🎜🎜🎜🎜hide-nav-bar🎜🎜(선택 사항)🎜🎜🎜🎜boolean🎜🎜

상위 ionNavBar를 기본적으로 숨겨야 하는지 여부입니다. 🎜🎜🎜🎜🎜

ion-nav-bar

프로그램 상태가 변경되면 업데이트되는 상단 도구 모음을 만듭니다. 🎜🎜Usage🎜

<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>

🎜API🎜🎜🎜🎜🎜Property🎜🎜Type🎜🎜Details🎜🎜🎜🎜🎜🎜대리자 핸들🎜🎜(선택 사항)🎜🎜🎜 🎜문자열 🎜🎜< p> 이 핸들은 $ionicNavBarDelegate를 사용하여 이 탐색 모음을 식별합니다. 🎜🎜🎜🎜🎜align-title🎜🎜(선택)🎜🎜🎜🎜String🎜🎜

내비게이션 바 제목이 정렬되는 위치입니다. 사용 가능: '왼쪽', '오른쪽', '가운데'. 기본값은 '중앙'입니다. 🎜

🎜🎜🎜🎜🎜

ion-nav-buttons

ionNavView와 제휴됨🎜

ionNavButtons를 사용하여 ionView의 ionNavBar에 버튼을 설정하세요. 🎜

설정한 모든 버튼은 탐색 모음의 해당 위치에 배치되며 사용자가 상위 뷰를 떠날 때 삭제됩니다. 🎜🎜Usage🎜

function MyCtrl($scope, $ionicNavBarDelegate) {
  $scope.goBack = function() {
    $ionicNavBarDelegate.back();
  };
}

🎜API🎜🎜🎜🎜🎜Property🎜🎜Type🎜🎜Details🎜🎜🎜🎜🎜🎜side🎜🎜String🎜🎜

부모 ionNavBar에서 버튼이 위치하는 위치입니다. 사용 가능: '왼쪽' 또는 '오른쪽'. 🎜🎜🎜🎜🎜

`ion-nav-back-button`

ionNavBar에 버튼을 만듭니다.

사용자가 현재 탐색에서 뒤로 돌아갈 수 있으면 뒤로 버튼이 표시됩니다.

`Usage`

기본 버튼 동작:

<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>

사용자 지정 클릭 동작, $ionicNavBarDelegate 사용:

function MyCtrl($scope, $ionicNavBarDelegate) {
  $scope.getPreviousTitle = function() {
    return $ionicNavBarDelegate.getPreviousTitle();
  };
}

<a nav-clear menu-close href="#/home" class="item">首页</a>

뒤로 버튼에 이전 제목을 표시하려면 $ionicNavBarDelegate도 사용하세요.

<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
  <ion-view>
    <ion-nav-title>
      <img src="logo.svg">
    </ion-nav-title>
    <ion-content>
      Some super content here!
    </ion-content>
  </ion-view>
</ion-nav-view>

<a nav-transition="none" href="#/home">Home</a>

`nav-clear`

nav-clear는 <a href> 또는 <button ui-sref>와 같은 뷰의 요소를 클릭할 때 사용되는 속성 지시문입니다.

클릭하면 nav-clear로 인해 해당 요소가 다음 보기 전환을 비활성화합니다. 이 명령은 예를 들어 사이드바 메뉴 내의 링크에 유용합니다.

`Usage`

다음은 사이드바 메뉴에 nav-clear 명령을 추가한 링크입니다. 이 링크를 클릭하면 보기 사이의 애니메이션이 비활성화됩니다.

<a nav-direction="forward" href="#/home">Home</a>

`ion-nav-title`

ion-nav-title은 ion-view 템플릿에서 제목을 설정하는 데 사용됩니다.

`Usage`

<body ng-controller="MyCtrl">
  <ion-nav-bar>
    <button ng-click="setNavTitle('banana')">
      Set title to banana!
    </button>
  </ion-nav-bar>
</body>

`nav-transition`

사용되는 전환 유형을 설정합니다(ios, android, none).

`Usage`

function MyCtrl($scope, $ionicNavBarDelegate) {
  $scope.setNavTitle = function(title) {
    $ionicNavBarDelegate.title(title);
  }
}

`nav-direction`

내비게이션 뷰에서 앞으로, 뒤로, 들어가기, 나가기, 교환이 가능한 전환 애니메이션의 방향을 설정합니다.

`Usage`

align([direction])

`$ionicNavBarDelegate`

ion-nav-bar 명령을 승인합니다.

`Usage`

align([direction])


showBar(show)
Method
showBackButton([show])
검색 기록으로 돌아갑니다. 
Parameters Type Details
event(선택 사항) DOMEventDOMEvent 事件对象（如来自点击事件）
title(title)
带有按钮的标题对齐到指定的方向。
参数 类型 详情
direction(可选) 字符串 标题文字对齐的方向。可用: 'left', 'right', 'center'。 默认: 'center'。
返回值: 布尔值， 后退按钮是否显示。
viewHistory()
设置或获取 ion-nav-bar 是否显示。
参数 类型 详情
show 布尔值 导航栏是否显示。
返回值: 布尔值， 导航栏是否显示。
currentView()
设置或获取 ion-nav-back-button  是否显示。
currentHistoryId()
参数 类型 详情
show(可选) 布尔值 Event 객체(예: 클릭 이벤트)  
 
버튼이 지정된 방향으로 정렬된 제목입니다. 🎜🎜🎜🎜🎜Parameters🎜🎜Type🎜🎜Details🎜🎜🎜🎜🎜🎜direction🎜🎜(선택 사항)🎜🎜🎜🎜String🎜🎜🎜제목 텍스트의 방향 정렬되었습니다. 사용 가능: '왼쪽', '오른쪽', '가운데'. 기본값: '중앙'. 🎜🎜🎜🎜🎜🎜반환 값: 부울 값, 뒤로 버튼 표시 여부. 🎜currentTitle([val])
🎜ion-nav-bar 표시 여부를 설정하거나 가져옵니다. 🎜🎜🎜🎜🎜Parameters🎜🎜Type🎜🎜Details🎜🎜🎜🎜🎜🎜show🎜🎜Boolean🎜🎜🎜탐색 표시줄 표시 여부. 🎜🎜🎜🎜🎜🎜반환 값: 탐색 모음 표시 여부에 대한 부울 값입니다. 🎜backView()
🎜ion-nav-back-버튼 표시 여부를 설정하거나 가져옵니다. 🎜🎜🎜🎜🎜Parameters🎜🎜Type🎜🎜Details🎜🎜🎜🎜🎜🎜show🎜🎜(선택 사항)🎜🎜🎜🎜Boolean🎜🎜🎜뒤로 버튼 표시 여부 🎜 🎜🎜🎜🎜backTitle()
ion-nav-bar의 제목을 설정하세요. 
parameters type details
title 字符串 새 제목 표시. 
$ionicHistory
$ionicHistory는 앱 내에서 사용자의 검색 기록을 추적하는 데 사용됩니다. 
Method 
forwardView()
는 기록을 보는 데 사용됩니다. 
currentStateName()
앱의 현재 모습입니다. 
goBack([backCount])
 현재 뷰의 상위 클래스 컨테이너인 히스토리 스택의 ID입니다. 
rrreee 현재 보기의 제목을 가져오거나 설정하세요. 
rrreee마지막으로 본 화면으로 돌아갑니다. 
rrreee 마지막으로 본 보기의 제목을 가져옵니다. 
rrreee 기록 스택에서 현재 보기 이전 보기를 반환합니다. 
rrreee현재 주 이름을 반환합니다. 
rrreeeapp 대체 보기(대체 보기가 존재하는 경우).

이온 항법

ion-nav-view

Caching

전역적으로 캐싱 비활성화

STATE PROVIDER에서 캐시 비활성화

속성을 통해 캐시 비활성화

AngularUI 라우터

API

ion-view

API

ion-nav-bar

用法

API

ion-nav-buttons

用法

API

ion-view

ion-nav-bar

ion-nav-buttons

ion-nav-back-button

Usage

nav-clear

Usage

ion-nav-title

Usage

nav-transition

Usage

nav-direction

Usage

$ionicNavBarDelegate

Usage

Method

$ionicHistory

Method

PHP 중국어 웹사이트

`ion-nav-back-button`

`Usage`

`nav-clear`

`Usage`

`ion-nav-title`

`Usage`

`nav-transition`

`Usage`

`nav-direction`

`Usage`

`$ionicNavBarDelegate`

`Usage`

`PHP 중국어 웹사이트`