2014-11-21 18 views
5

Tôi đang theo một số ví dụ từ trang web và html hiện tại của tôi là:Ionic - tiêu đề ion-view không làm việc

<!DOCTYPE html> 
<html ng-app="Test"> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title></title> 

    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
    <link href="css/ionic.app.css" rel="stylesheet"> 
    --> 

    <!-- ionic/angularjs js --> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 

    <!-- cordova script (this will be a 404 during development) --> 
    <script src="cordova.js"></script> 

    <!-- your app's js --> 
    <script src="js/app.js"></script> 
</head> 

<body> 
    <ion-nav-bar class="bar-positive"> 
     <ion-nav-back-button class="button-icon ion-arrow-left-c"> 
     </ion-nav-back-button> 
    </ion-nav-bar> 
    <ion-nav-view> 
     <!-- Center content --> 
    </ion-nav-view> 

    <script type="text/ng-template" id="main.html"> 
     <ion-view view-title="Home"> 
      <ion-content > 
       <p> 
        Test 
       </p> 
      </ion-content> 
     </ion-view> 
    </script> 
</body> 

</html> 

Và js:

var app = angular.module('Test', ['ionic']); 

app.config(function($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('/') 

    $stateProvider.state('index', { 
    url: '/', 
    templateUrl: 'main.html', 
    controller: 'TestCtrl' 

    }) 
}) 

app.controller('TestCtrl', function($scope) { 

}) 

Bây giờ các tài liệu nói view-title = "Test" sẽ điền tiêu đề vào thanh điều hướng ion. Nhưng nó dường như không hoạt động. Có ai biết chuyện gì đang xảy ra không?

+1

thử title = "Test" thay vì xem title = "Test"? – Asik

+0

Ok..Tôi đã thêm với tài liệu URL – Asik

Trả lời

17

Dường như nó có thể được sử dụng trong cả hai cách,

<ion-view view-title="My Page"> 

hoặc

<ion-nav-title> 
    {{page.title}} 
</ion-nav-title> 

theo phiên bản mới nhất của ion. http://ionicframework.com/docs/api/directive/ionView/ http://ionicframework.com/docs/api/directive/ionNavTitle/

+5

Đối với những người gặp sự cố tương tự; sử dụng tiêu đề xem đã cho tôi sự cố khi sử dụng tiêu đề động. Chuyển sang tiêu đề ion-nav đã giải quyết vấn đề này. (sử dụng ionic 1.1.0) – SaW

+0

Để biết thêm thông tin về giải pháp được đề xuất bởi @SaW: https://www.raymondcamden.com/2015/12/18/is-your-ionic-view-title-not-updating/ – rinogo

-3

Ionic liên tục hoạt động và họ sẽ cập nhật các chỉ thị trong các bản phát hành sắp tới và tôi giả định rằng bạn đang sử dụng phiên bản cũ.

Theo 1.0.0-beta.13 doc, Thuộc tính nên title thay vì view-title

Thay đổi dòng sau

<ion-view view-title="Home"> 

để

<ion-view title="Home"> 

Phiên bản cũ Đốc: http://ionicframework.com/docs/1.0.0-beta.13/api/directive/ionView/

Nhưng trong phiên bản mới nhất, nó phải là view-title

mới nhất doc: http://ionicframework.com/docs/api/directive/ionView/

+0

thì làm thế nào để bạn giải thích '' từ http://ionicframework.com/docs/api/directive/ionNavView/? – msysmilu

+0

Tôi không quen thuộc với ion. dù sao, chỉ thị "tiêu đề xem" được sử dụng trong url được đề cập ở trên ở đâu? – Asik

+0

tôi thấy nó [ở đây] (http://codepen.io/ionic/embed/odqCz?height=568&theme-id=3572&slug-hash=odqCz&default-tab=result&user=ionic#html-box) - trong tab HTML; nó cũng đúng là tôi đã cố gắng sao chép ví dụ và 'view-title' không hoạt động và phải thay đổi nó thành' title'; tôi đoán nó chỉ là một điều beta; bạn sẽ giới thiệu một khuôn khổ khác cho Cordova? – msysmilu

5

này nên làm việc,

<ion-view> 
    <ion-nav-title> Your title here 
    </ion-nav-title> 
</ion-view> 
+0

Lưu ý, tiêu đề ion-nav nên được đặt bên trong ion- nav-bar là 1.0.0.rc.1 – arieljake

1

chuyển sang sử dụng <ion-nav-title>

<ion-view> 
<ion-nav-title>{{navTitle}}</ion-nav-title> 
<ion-content overflow-scroll="true" padding="true" class="has-header"> 
    <div> 
     <p>The opening crawl would go here.</p> 
    </div> 
</ion-content> 

click to read more

Các vấn đề liên quan