2014-11-21 18 views
5

Obserwuję niektóre przykłady z portalu i mojego obecnego HTML jest:Ionic - tytuł jonów widok nie działa

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

I 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) { 

}) 

Teraz dokumentacja mówi view-title = "Test" powinien wypełnić tytuł w jono-navbar. Ale to nie działa. Czy ktoś wie, co jest nie tak?

+1

tytułowy try = "test" zamiast widok-title = "test"? – Asik

+0

Ok..I dodano z dokumentami URL – Asik

Odpowiedz

17

Wydaje się, że może on być stosowany w obu kierunkach,

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

lub

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

według najnowszej wersji jonowej. http://ionicframework.com/docs/api/directive/ionView/ http://ionicframework.com/docs/api/directive/ionNavTitle/

+5

Dla tych, którzy mają podobny problem; używanie tytułu widoku dało mi problemy z używaniem dynamicznych tytułów. Przejście na jon-nav-title rozwiązało to. (używając ionic 1.1.0) – SaW

+0

Aby uzyskać więcej informacji na temat rozwiązania zaproponowanego przez @SaW: https://www.raymondcamden.com/2015/12/18/is-your-ionic-view-title-not-updating/ – rinogo

-3

Firma Ionic stale pracuje, a oni aktualizują dyrektywy w nadchodzących wersjach i zakładam, że używasz starej wersji.

Jak na 1.0.0-beta.13 doc, atrybut powinien być title zamiast view-title

zmienić następujące linia

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

do

<ion-view title="Home"> 

Stara wersja Doc: http://ionicframework.com/docs/1.0.0-beta.13/api/directive/ionView/

Ale w wersji najnowszej, powinno być view-title

Najnowsze doc: http://ionicframework.com/docs/api/directive/ionView/

+0

, a następnie jak wyjaśnić "' od http://ionicframework.com/docs/api/directive/ionNavView/? – msysmilu

+0

Nie jestem zaznajomiony z jonowym. tak czy inaczej, gdzie jest dyrektywa "view-title" użyta w powyższym adresie URL? – Asik

+0

widziałem to [tutaj] (http://codepen.io/ionic/embed/odqCz?height=568&theme-id=3572&slug-hash=odqCz&default-tab=result&user=ionic#html-box) - w zakładce HTML; prawdą jest również, że próbowałem skopiować przykład, a "widok-tytuł" nie działa i musiał zmienić go na "tytuł"; myślę, że to tylko kwestia beta; Czy poleciłbyś inne ramy dla Cordova? – msysmilu

5

To powinno działać,

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

Uwaga, jon-nav-title powinien być umieszczony wewnątrz jona- nav-bar od 1.0.0.rc.1 – arieljake

1

Przełącz do korzystania <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

Powiązane problemy