2015-10-16 2 views
0

маршрутизации в моем приложении настроена следующим образом:маршрутизация не работает в ионном приложении

$stateProvider 
    .state('app', { 
    url: '', 
    abstract: true, 
    template: '<ion-nav-view></ion-nav-view>' 
    }); 

    $stateProvider 
    .state('app.todos', { 
    url: '/home', 
    views: { 
     todos: { 
     templateUrl: 'home.html', 
     controller: 'TodosCtrl' 
     } 
    } 
    }); 

    $stateProvider 
    .state('app.help', { 
    url: '/help', 
    views: { 
     help: { 
     templateUrl: 'help.html'  
     } 
    } 
    }); 

$urlRouterProvider.otherwise('/home'); 

//index.html

<body> 
    <ion-nav-bar class="bar-positive"> </ion-nav-bar> 

    <ion-tabs class="tabs-positive"> 

    <ion-tab icon="ion-checkmark" ui-sref="app.todos"> 
     <ion-nav-view name="todos"></ion-nav-view> 
    </ion-tab> 

    <ion-tab icon="ion-help" ui-sref="app.help"> 
     <ion-nav-view name="help"></ion-nav-view> 
    </ion-tab> 


    </ion-tabs> 


    <script type="text/ng-template" id="home.html"> 
    <ion-view title="Todos"> 
     <ion-content padding="true"> 
     <h2>Home Page</h2> 
     <p>Here's the main route for the app.</p> 
     </ion-content> 
    </ion-view> 
    </script> 

    <script type="text/ng-template" id="help.html"> 
    <ion-view title="Help"> 
    <ion-content padding="true"> 
     <h2>Using the app</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis architecto hic officia quasi excepturi sequi deleniti maiores consectetur veritatis sint?</p> 
    </ion-content> 
    </ion-view> 
</script> 

</body> 

На старте приложения, я бы ожидать, что государственное app.todos в активизироваться и отображать соответствующий шаблон.

Этого не происходит.

Plnkr доступны здесь: http://plnkr.co/edit/LDNLHx?p=preview

+0

Как вы ссылки на этот маршрут? Я думал, что заметил недопустимый тег привязки ... не могли бы вы показать нам код, который будет ссылаться на страницу друзей? – Makoto

+0

не уверен, что вы открыли правильный plnkr – runtimeZero

+0

Вперед и разместите свой файл tabs.html здесь, я покажу вам, что я имею в виду. – Makoto

ответ

0

посмотрите на эту codepen http://codepen.io/aaronksaunders/pen/wKMEYP?editors=101

я переехал шаблон вкладки к HTML-файл и структурированном его, как я использовать для работы с закладками и, кажется, работайте отлично.

<script type="text/ng-template" id="tabs.html"> 
    <ion-tabs class="tabs-positive"> 
     <ion-tab icon="ion-checkmark" ui-sref="app.todos"> 
     <ion-nav-view name="todos"></ion-nav-view> 
     </ion-tab> 

     <ion-tab icon="ion-help" ui-sref="app.help"> 
     <ion-nav-view name="help"></ion-nav-view> 
     </ion-tab> 
    </ion-tabs> 
    </script> 

Я также структуру своего абстрактного состояния, чтобы справиться с новой структурой

.state('app', { 
    url: "/app", 
    abstract: true, 
    templateUrl: "tabs.html" 
    }) 
0

имена Put представлений под кавычки.

просмотров: { 'Todos': { templateUrl: 'home.html', контроллер: 'TodosCtrl' }}

Смежные вопросы