이온 탐색

이전 : 이온 모달 창

다음 : 이온 플랫폼

이온 탐색

이온 탐색보기

사용자가 앱을 탐색 할 때 때 검색 기록을 감지 할 수 이온. 검색 기록을 검출함으로써, 왼쪽으로 스 와이프 또는 제대로 전망을 펼친 권리 달성하기 위해.

사용 AngularUI 라우터 모듈 인터페이스 및 다른 애플리케이션은 다른 $ 상태 (상태)로 나눌 수있다. 서비스 라우팅 각심이 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을에 <이온 탐색 뷰>을로드합니다.

URL을 통해 페이지가로드 구성. 가장 간단한 방법의 템플릿을 직접 각도 HTML 템플릿 파일에 그를 넣어 포함 <스크립트 유형 = "텍스트 / NG-템플릿을">를 사용하는 것입니다 만듭니다.

그래서이 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>

»시도

템플릿이 빠르게 로딩 것이기 때문에, 좋은 방법이며, 캐시는 네트워크로드를 통해 갈 다르다.

캐싱

정상적인 상황에서는보기 성능을 향상시킬 수 있습니다 캐시됩니다. 도면에서, 그 요소는 돔에 유지 한 경우의 범주는 또한 $ 시계로부터 제거된다.

우리는 캐시보기이었다 이동하면보기가 활성화됩니다 그 범위가 다시 연결되고, 돔은 자신의 요소를 저장. 이것은 또한 이전 뷰 스크롤 위치를 유지할 수 있습니다.

캐싱도에와 해제하는 방법에는 여러 가지가 될 수 있습니다. 페이지 캐시 이온 기본 최대 수는 10이고, 이는 유일한 맞춤형 아니라, 명시 적으로 뷰 상태를 설정할 수있는 애플리케이션이 캐시되지 않아야한다.

우리는 이러한 견해를 캐싱하기 때문에, 우리는 범위를 파괴하지 않습니다. 대신,도 $ 시계의 범위 내에서 제거된다.

다음보기의 범위는 파괴와 재건되지 않았기 때문에, 컨트롤러는 다시로드되지 않습니다. 응용 프로그램 / 컨트롤러는 입력 또는 뷰를 떠나, 다음과 같은 $ ionicView.enter 같은 ionView 조치 문제에서 이벤트를 볼 때 필요한 경우 유용 할 수 있습니다.

글로벌 비활성화 캐싱

$ 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 경로

방문 AngularUI 라우터의 문서를 더.

API

재산	유형	세부 정보
이름 (선택 사항)	`字符串`	뷰의 이름입니다. 이 이름은 동일한 상태에서 유일하게 다른 뷰해야합니다. 당신은 다른 상태에서 같은 이름의 뷰를 가질 수있다. 자세한 내용은 UI를 라우터보기 UI를보기 문서를 .

이온보기

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

재산	유형	세부 정보
표제 (선택 사항)	`字符串`	그것은 부모에 표시됩니다 `ionNavBar` 제목입니다.
숨기기 백 버튼 (선택 사항)	`布尔值`	기본적으로 경우 부모 `ionNavBar` 뒤로 버튼을 숨 깁니다.
숨기기 - 탐색 바 (선택 사항)	`布尔值`	기본적으로 부모 숨길 경우 `ionNavBar` .

이온 탐색 바

프로그램이 상태 변화를 갱신 할 때, 상단의 툴바를 만든다.

용법

<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

재산 유형 세부 정보

재산	유형	세부 정보
대표 핸들 (선택 사항)	`字符串`	와 핸들 `$ionicNavBarDelegate` 탐색 모음을 식별합니다.
정렬 제목 (선택 사항)	`字符串`	탐색 모음 제목의 위치를 정렬됩니다. 이용 가능 : '오른쪽', '중심'을 '왼쪽'. 기본값은 '센터'입니다.

대표 핸들

(선택 사항)

字符串

와 핸들 $ionicNavBarDelegate 탐색 모음을 식별합니다.

정렬 제목

(선택 사항)

字符串

탐색 모음 제목의 위치를 정렬됩니다. 이용 가능 : '오른쪽', '중심'을 '왼쪽'. 기본값은 '센터'입니다.

이온 항법 버튼

제휴 ionNavView

ionNavBar ionView에 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

재산	유형	세부 정보
측면	`字符串`	부모 `ionNavBar` 위치에 버튼을 배치. 사용 가능한 '왼쪽'또는 '오른쪽'.

이온 탐색 백 버튼

에 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 맑은

당신이 요소보기를 클릭 할 때 탐색 맑은 속성은 때와 같은 <a의 HREF> 또는 <버튼의 UI (SREF)> 명령을 사용했다.

클릭하면 해당 요소가 발생합니다 탐색 맑은는 뷰의 매출에 따라 금지되어 있습니다. 이 명령은 예를 들어, 사이드 바 메뉴 링크, 유용합니다.

용법

다음 명령 클리어를 탐색 할 수있는 링크를 추가하는 사이드 바 메뉴입니다. 링크를 클릭하면보기 사이에 애니메이션을 사용할 수 없게됩니다.

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

이온 탐색 제목

이온 탐색 제목 이온 뷰 템플릿은 제목을 설정하는 데 사용됩니다.

용법

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

탐색 전이

IOS, 안드로이드, 및 없음 : 사용할 수 있고 전환 유형을 설정합니다.

용법

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

탐색 방향

종료, 스왑, 다시, 하나 앞으로 탐색 뷰 전환 애니메이션 방향을 설정 입력합니다.

용법

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

$ IonicNavBarDelegate

자격 제어 이온 탐색 바 지침.

용법

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

위로 검색 기록한다.

매개 변수	유형	세부 정보
행사 (선택 사항)	`DOMEvent`	(예 : 클릭 이벤트에서와 같은) 이벤트 객체

align([direction])

지정된 방향으로 정렬 버튼 제목입니다.

매개 변수	유형	세부 정보
방향 (선택 사항)	`字符串`	타이틀 텍스트 배열 방향. 이용 가능 : '오른쪽', '중심'을 '왼쪽'. 기본값 : '센터'.

반환 값 : 부울 값 뒤로 버튼이 표시됩니다.

showBar(show)

가져 오거나 이온 탐색 바 표시됩니다 설정합니다.

매개 변수	유형	세부 정보
표시	`布尔值`	탐색 모음이 표시됩니다.

반환 값 : 부울 탐색 막대가 표시됩니다.

showBackButton([show])

가져 오거나 이온 탐색 백 버튼이 표시됩니다 설정합니다.

매개 변수	유형	세부 정보
표시 (선택 사항)	`布尔值`	뒤로 버튼을 표시할지 여부를

title(title)

캡션 이온 탐색 바을 설정합니다.

매개 변수	유형	세부 정보
표제	`字符串`	새로운 제목을 표시합니다.

$ IonicHistory

$ IonicHistory 앱 내에서 사용자의 인터넷 사용 기록을 추적하는 데 사용.

방법

viewHistory()

역사를보고하십시오.

currentView()

응용 프로그램의 현재보기.

currentHistoryId()

역사 스택 ID는 현재 뷰의 부모 컨테이너입니다.

currentTitle([val])

가져 오거나 현재보기의 제목을 설정합니다.

backView()

마지막으로 본보기로 돌아갑니다.

backTitle()

제목 마지막 찾아보기를 얻을.

forwardView()

위로 현재 스택의 역사적 관점에 볼 수 있습니다.

currentStateName()

현재 상태 명을 돌려줍니다.

goBack([backCount])

앱 롤백보기,보기의 롤백이 존재하는 경우.

이전 : 이온 모달 창

다음 : 이온 플랫폼

ionic 코스

ionic CSS

ionic JavaScript

이온 탐색

이온 탐색

이온 탐색보기

캐싱

글로벌 비활성화 캐싱

주 제공자에 안 캐싱

속성을 통해 캐시를 사용하지 않도록 설정

AngularUI 경로

API

이온보기

API

이온 탐색 바

용법

API

이온 항법 버튼

용법

API

이온 탐색 백 버튼

용법

NAV 맑은

용법

이온 탐색 제목

용법

탐색 전이

용법

탐색 방향

용법

$ IonicNavBarDelegate

용법

방법

$ IonicHistory

방법