UI-маршрутизатор в ионной структуре -- javascript поле с участием angularjs поле с участием cordova поле с участием ionic-framework пол Связанный проблема

ui-router in ionic framework issue


1
vote

проблема

русский

У меня проблемы с тем, чтобы получить свои маршруты, чтобы соответствовать моим взглядам. У меня есть следующие маршруты:

 <код> .state('tab.account', {   url: '/account',   abstract: true,   views: {     'tab-account': {       templateUrl: 'templates/tab-account.html',       controller: 'AccountController'     }   } }) .state('tab.account.order', {   url: '/order/:id',    views: {     'order-view': {       templateUrl: 'templates/order-view.html',        controller: 'OrderController'     }   } })   

У меня это в шаблонах / вкладках .html

 <код> <ion-view title="Account"> <ion-content class="has-header padding"> <h1>Account</h1>  <h2>Your orders</h2>  <div class="card" ng-repeat="booking in bookings">   <div class="item item-text-wrap">     <b><a ng-click="viewOrder(booking.id)">{{ booking.carpark.city }}</a></b> on <b>{{ booking.date | date:'dd.mm.yyyy' }}</b>   </div> </div>   

.

У меня есть эта функция в контроллере для этого:

 <код> $scope.viewOrder = function(id) {            $state.go('tab.account.order', {id:id}); };   

Тогда, наконец, у меня есть этот вид на заказ:

 <код> <ion-view ui-view="orderView" title="Order"> <ion-content class="has-header padding">     <h1>Your Order</h1> </ion-content>   

Урл, кажется, работает, я в конечном итоге с # / Tab / учетной записью / порядком / 1, но он не загружает этот окончательный вид!

заранее ура!

Английский оригинал

I'm having trouble getting my routes to match up with my views. I have the following routes:

.state('tab.account', {   url: '/account',   abstract: true,   views: {     'tab-account': {       templateUrl: 'templates/tab-account.html',       controller: 'AccountController'     }   } }) .state('tab.account.order', {   url: '/order/:id',    views: {     'order-view': {       templateUrl: 'templates/order-view.html',        controller: 'OrderController'     }   } }) 

I have this in templates/tab-account.html

<ion-view title="Account"> <ion-content class="has-header padding"> <h1>Account</h1>  <h2>Your orders</h2>  <div class="card" ng-repeat="booking in bookings">   <div class="item item-text-wrap">     <b><a ng-click="viewOrder(booking.id)">{{ booking.carpark.city }}</a></b> on <b>{{ booking.date | date:'dd.mm.yyyy' }}</b>   </div> </div> 

I have this function in the controller for that view:

$scope.viewOrder = function(id) {            $state.go('tab.account.order', {id:id}); }; 

Then finally I have this view for the order:

<ion-view ui-view="orderView" title="Order"> <ion-content class="has-header padding">     <h1>Your Order</h1> </ion-content> 

The url seems to work, I end up with #/tab/account/order/1 but it doesn't load that final view!

Cheers in advance!

</div
           

Список ответов

3
 
vote
vote
Лучший ответ
 

Конфигурация UI-маршрутизатора будет зависеть от того, что вы пытаетесь сделать.

Похоже, вы хотите представить учетную запись и представление заказа на отдельные страницы, в этом случае вы не хотите, чтобы это было абстрактное состояние, поскольку из UI-маршрутизатор Wiki :« Абстрактное государство может иметь детей Но не может быть активирован сама. «Абстрактное» состояние - это просто состояние, которое не может быть пересечено. »

Я не совсем уверен, что вы даже хотите, чтобы детское государство по той же причине, поскольку «дети для детей загрузит свои шаблоны в вид UI-родительства». ( https: //github.com/angular-ui/ui-orouter/wiki/nested-states-%26-nested-views#nested-states-Views ).

Если это так, то вы можете сделать что-то подобное:

 <код> .state('tab.account', {   url: '/account',   templateUrl: 'templates/tab-account.html',   controller: 'AccountController' }) .state('tab.order', {   url: '/account/order/:id',    templateUrl: 'templates/order-view.html',    controller: 'OrderController' })   

Вот plunkr: http://plnkr.co/edit/ueeqcxbwchxqygv7wmlw?p=preview
/ a>

Просмотры объекты были удалены, так как вам не нужны, если у вас нет нескольких вложенных представлений.

Если, однако, вы хотели просмотреть заказ на той же странице, то вы можете сделать что-то вроде этого: http://plnkr.co/edit/8tb1uhvdm0hcw8cgprfl?p=preview

 <код> <ion-view title="Account">   <ion-content class="has-header padding">     <h1>Account</h1>      <h2>Your orders</h2>      <div class="card" ng-repeat="booking in bookings">       <div class="item item-text-wrap">         <b><a ng-click="viewOrder(booking.id)">{{ booking.carpark.city }}</a></b> on <b>{{ booking.date | date:'dd.mm.yyyy' }}</b>       </div>     </div>     <ui-view></ui-view> <!-- Where the child view will load -->   </ion-content> </ion-view>   

app.js:

 <код> .state('tab.account', {   url: '/account',   templateUrl: 'tab-account.html',   controller: 'AccountController' }) .state('tab.account.order', {   url: '/order/:id',    templateUrl: 'order-view.html',    controller: 'OrderController' })   

Вы также, вероятно, захотите удалить <код> ion-content из шаблона просмотра заказа, иначе вы можете получить некоторые проблемы с двойным прокруткой.

Надеюсь, это поможет! UI-маршрутизатор довольно запутается, но у их вики есть отличная документация и примеры для очистки вещей.

 

The ui-router configuration will depend on what you're trying to do.

It looks like you want the account view and the order view to be on separate pages, in which case you won't want it to be an abstract state, since from the ui-router wiki: "An abstract state can have child states but can not get activated itself. An 'abstract' state is simply a state that can't be transitioned to."

I'm not entirely sure you even want a child state for the same reason, since "child states will load their templates into their parent's ui-view." (https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#nested-states--views).

If this is the case, then you can do something like this:

.state('tab.account', {   url: '/account',   templateUrl: 'templates/tab-account.html',   controller: 'AccountController' }) .state('tab.order', {   url: '/account/order/:id',    templateUrl: 'templates/order-view.html',    controller: 'OrderController' }) 

Here's a plunkr: http://plnkr.co/edit/uuEQcxbWchxQyGV7wMlw?p=preview

The views objects have been removed, since you don't really need them unless you have multiple nested views.

If however you wanted the order view on the same page, then you could do something like this: http://plnkr.co/edit/8Tb1uhVDM0HCW8cgPRfL?p=preview

<ion-view title="Account">   <ion-content class="has-header padding">     <h1>Account</h1>      <h2>Your orders</h2>      <div class="card" ng-repeat="booking in bookings">       <div class="item item-text-wrap">         <b><a ng-click="viewOrder(booking.id)">{{ booking.carpark.city }}</a></b> on <b>{{ booking.date | date:'dd.mm.yyyy' }}</b>       </div>     </div>     <ui-view></ui-view> <!-- Where the child view will load -->   </ion-content> </ion-view> 

app.js:

.state('tab.account', {   url: '/account',   templateUrl: 'tab-account.html',   controller: 'AccountController' }) .state('tab.account.order', {   url: '/order/:id',    templateUrl: 'order-view.html',    controller: 'OrderController' }) 

You'll also probably want to remove your ion-content from the order view template, or else you might get some funky double scroll issues.

Hope this helps! Ui-router is pretty confusing, but their wiki has some great documentation and examples to clear things up.

</div
 
 
 
 

Связанный проблема

0  JavaScript Foreach Array Ключевые значения, вывод в HTML  ( Javascript foreach array key values output to html ) 
Как сердите к клавишам ARRAY THRU, чтобы вывести свои значения в HTML? Расположение Я работаю, - это миниатюрная сетка, 3 колонны на 2 ряда. Каждый миниатюр...

1  JavaScript не работает над динамическим контентом  ( Javascript not working on dynamic content ) 
У меня есть страница, где в HTML Div загружен с другой страницы. На родительской странице у меня есть JavaScript, который имеет элементы, которые применяются ...

0  Удалите подстроку из строки в jQuery [дублировать]  ( Remove a substring from a string in jquery ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

0  Отображать имя страницы в JavaScript?  ( Display page name in javascript ) 
Как бы я добавил <код> location.href.split('/').pop() к документу HTML для отображения имени страницы? (Не весь URL) я хотел бы отобразить только имя страниц...

0  Команда STEART BOBLE не работает, когда добавляю новый файл JS  ( Stencil bundle command is not working when i add new js file ) 
Я добавил несколько файлов JS в моей теме (Track-CLI), а когда я запускаю stencil bundle COMMENT, ошибки JS получили бросок. Я пробовал удаление <код> app...

0  Модель только показывает идентификатор в вложенной модели в парусах  ( Model only show id in nested model in sails ) 
Так что я разрабатываю приложение, используя парус JS. Я хочу отправить нить вместе с его комментариями как ответ. Вот моя модель thread.js <код> module...

1  Как заменить адреса электронной почты с ссылками Mailto на веб-странице Live?  ( How to replace email addresses with mailto links in a live web page ) 
Представьте себе это: вы столкнулись с веб-страницей, который говорит: «Просто отправьте сообщение user@example.com», но чтобы на самом деле отправить электро...

362  JavaScript Глобальный механизм событий  ( Javascript global event mechanism ) 
Я хотел бы поймать каждую неопределенную ошибку функции. Есть ли глобальная обработка ошибок в JavaScript? Чехол на использование ловит вызовы функций от Flas...

0  Сортировка не работает в смарт-таблице угловой JS  ( Sorting is not working in smart table angular js ) 
Сортировка смарт-таблицы не работает по какой-то причине после использования в качестве пользовательской директивы. Можете ли вы помочь мне, что я сделал не т...

1  Столбец Tabulator с JSX - выполнение функций класса  ( Tabulator column with jsx executing class functions ) 
Я пытаюсь использовать React-Tabulator, но у меня проблемы с рендером функции внутри моих столбцов таблицы. Функция возвращает JSX, но она использует другие к...

4  Каковы разница между $ (документом) .bind («готовая», функция) и $ (документ). Ready (функция (функция () {}))  ( What are the difference between document bindready function and docume ) 
Я хочу обновить от Verysjs версии 2.0.0 до 2.1.5 Вот код: <код> define(['jquery', 'test.js'], function ($, test) { var test = new $.test({ ...

0  Кнопка CKeditor 4 Не отображается  ( Ckeditor 4 underline button not showing ) 
Это мой код JavaScript для конфигурации моего CKEDITOR. Я нахожу на браузере для этого решения, но я не могу найти никакого решения даже на официальном сайте ...

0  Как закрыть всплывающее окно, когда видео YouTube играет на кнопке кнопки ESC?  ( How to close popup when youtube video is playing on esc button button ) 
Нажмите меня, чтобы увидеть демонстрацию Когда видео не играет, то кнопка ESC нажала всплывающее окно, но он не работает при воспроизведении видео. ...

0  Новое развитие приложений с использованием Cordova и Ionic  ( Native app development using cordova and ionic ) 
Как сохранить процесс или сервис всегда запущены даже после того, как приложение будет убито пользователем, похожее на секундомер, который будет запущен даже ...

0  .append () элемент с более чем одним классом  ( Append element with more than one class ) 
Я не могу найти информацию о том, можно ли использовать .append (), чтобы добавить элемент в HTML и дать этому элементу более одного класса <код> $( ".nav"...

Связанный проблема

0  JavaScript Foreach Array Ключевые значения, вывод в HTML 
1  JavaScript не работает над динамическим контентом 
0  Удалите подстроку из строки в jQuery [дублировать] 
0  Отображать имя страницы в JavaScript? 
0  Команда STEART BOBLE не работает, когда добавляю новый файл JS 
0  Модель только показывает идентификатор в вложенной модели в парусах 
1  Как заменить адреса электронной почты с ссылками Mailto на веб-странице Live? 
362  JavaScript Глобальный механизм событий 
0  Сортировка не работает в смарт-таблице угловой JS 
1  Столбец Tabulator с JSX - выполнение функций класса 
4  Каковы разница между $ (документом) .bind («готовая», функция) и $ (документ). Ready (функция (функция () {})) 
0  Кнопка CKeditor 4 Не отображается 
0  Как закрыть всплывающее окно, когда видео YouTube играет на кнопке кнопки ESC? 
0  Новое развитие приложений с использованием Cordova и Ionic 
0  .append () элемент с более чем одним классом 



© 2021 www.qaru.top All Rights Reserved. Q&A House все права защищены


Licensed under cc by-sa 3.0 with attribution required.