Hello I have a problem...
.state('tabs', {
url: '/tabs',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tabs.personal', {
url: '/personal',
views: {
'personalGoals-view': {
templateUrl: 'templates/personalGoals.html',
controller: 'personalCtrl'
}
}
})
.state('tabs.personal.personalview', {
url: 'tabs/personal/personalview',
views: {
'personalview-view': {
template: 'hello',
controller: 'personalViewCtrl'
}
}
})
and this is my link:
<ion-view view-title="PersonalGoals">
<ion-content class="has-footer">
<ion-item ng-repeat="goal in goals" href="#" ui-sref="tabs.personal.personalview">
<span class="goal-lists">{{goal.goaltitle}}</span>
</ion-item>
</ion-content>
</ion-view>
(pound sign)/tabs/personal/personalview doesn't show and goes back to my otherwise link... I don't know why... please help...
Try using ui-sref:
<ion-view view-title="PersonalGoals">
<ion-content class="has-footer">
<ion-item ng-repeat="goal in goals" ui-sref="tabs.personal.personalview">
<span class="goal-lists">{{goal.goaltitle}}</span>
</ion-item>
</ion-content>
</ion-view>
2 things :
When using ui-router use ui-sref="tabs.personal.personalview" it's way better than href.
2nd Your state is a grand children of the state tabs and URL are relative to their parent states. So his full URL would be
<tabs URL>/<tabs.personal URL>/tabs/personal/personalview
If i guessed correctly how you did declare your states this will give something like
tabs/tabs/personal/tabs/personal/personalview
If you click on a link using ui-sref.
Related
I am trying to link to a substate and can't figure out how to get it to work. Here is the link:
<a ui-sref="tab.communityDashboard" class="button button-block button-large"><i class="icon ion-home"></i><br />Community Directory</a>
and here is the route:
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.communityDashboard', {
url: '/communitydashboard',
views: {
'tab-communityDashboard': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
and then eventually:
$urlRouterProvider.otherwise('/home');
Here is the content of the view:
<ion-view view-title="tab-communityDashboard">
<ion-content>
yolo yolo yolo
</ion-content>
</ion-view>
I tried also going to localhost:8100/#/communitydashboard but it just redirects me home. How do I fix this.
You need an <ion-nav-view> where you want your view to show up, and since you're using views with your states, you'll need to include the name attribute with the name of the view, so something like <ion-nav-view name="tab-communityDashboard">
http://ionicframework.com/docs/api/directive/ionNavView/
http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/
Hi i'm having two views in my app with two controllers assigned to each.
Here i need to reinitialize the controller every time when ever i navigate to particular view.
Angular Script:
.state('app.pnrlist', {
url: "/pnrlist",
views: {
'menuContent': {
templateUrl: "templates/test.html",
controller: "testControl",
reload: true
}
},
reload:true
})
.state('app.home', {
url: "/home",
views: {
'menuContent': {
templateUrl: "templates/home.html",
controller:"homeControl",
reload:true
}
},
reload:true
})
HTML Content
<ion-content>
<ion-list>
<ion-item nav-clear menu-close href="#/app/home">
Home
</ion-item>
<ion-item nav-clear menu-close href="#/app/pnrlist">
PNR List
</ion-item>
</ion-list>
</ion-content>
I have tried to implement many solutions on stack but none helped me.
Solution Tried 1 /
Solution Tried 2
If its a matter of the View not updating, disabling the Cache may help
i.e
.state('app.home', {
url: "/home",
cache: false,
As by default, views are cached to improve performance. You can also disable the cache via the 'cache-view' attribute
<ion-view cache-view="false" view-title="My Title!">
...
</ion-view>
I have an Ionic sidemenu project with the following menu:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable" align-title="center">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-content>
<div class="list">
<a class="item item-icon-left" menu-close href="#/app/products">
<i class="icon ion-home"></i>
<h2>Home</h2>
</a>
<a class="item item-icon-left" menu-close href="#/app/account">
<i class="icon ion-person"></i>
<h2>mein Konto</h2>
</a>
<a class="item item-icon-left" menu-close href="#/app/orders">
<i class="icon ion-android-list"></i>
<h2>meine Bestellungen</h2>
</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
The hrefs defined here are all working as intended.
My products page now has several sub-pages.
Html-File:
<ion-view view-title="Home">
<ion-content>
<ion-list>
<ion-item ng-repeat="product in products" href="#/app/products/{{product.templateUrl}}">
{{product.name}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
JS-File:
angular.module('App.Products', ['App.Products.Prints', 'App.Products.Box', 'App.Products.Book', 'App.Products.Framed'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('app.products', {
url: "/products",
views: {
'menuContent': {
templateUrl: "modules/products/products.html",
controller: 'ProductsController'
}
}
});
})
.controller('ProductsController', function ($scope, ProductsFactory) {
$scope.products = [];
init();
function init() {
$scope.products = ProductsFactory.getProducts();
}
})
.factory('ProductsFactory', function() {
var products = [
{
name: 'Prints',
img: 'img/wardwarz.png',
templateUrl: 'prints'
},
{
name: 'PhotoBox',
img: 'img/argo.png',
templateUrl: 'box'
},
{
name: 'Photobuch',
img: 'img/django.png',
templateUrl: 'book'
},
{
name: 'Photo im Rahmen',
img: 'img/ic_profile.png',
templateUrl: 'framed'
}
];
var factory = {};
factory.getProducts = function () {
// Hier könnte ein HTTP Request rein um die Produkte vom Server zu erhalten!
return products;
}
return factory;
});
and to show one example one content of a sub page:
Html-File:
<ion-view view-title="Prints">
<ion-content>
</ion-content>
</ion-view>
JS-File:
angular.module('App.Products.Prints', [])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('app.products.prints', {
url: "/products/prints",
views: {
'menuContent': {
templateUrl: "modules/products/prints/prints.html"
}
}
});
});
When i now start the app ionic serve the navigation of the sidemenu works fine and i can open my products page. The navigation to prodcuts/prints does not work. I dont get an error message or anything. There is just nothing happening after the click on the item.
Whats going worng here?
An example Project can be found here: Mega File - MyApp.rar
Instead of using only href to do your navigation use
ui-sref="name_of_the_state"
Example:
ui-sref="app.products.prints"
This way you will not have issues with your navigation on angular/ionic.
If you even have a parameter in your route, like:
$stateProvider.state('app.products.edit', {
url: "/products/edit/:id",
views: {
'menuContent': {
templateUrl: "modules/products/prints/prints.html"
}
}
});
you can use:
ui-sref="app.products.edit(1)"
Also, I'm not seeying an abstract route on this, the app. It should be like:
app -> abstract
app.products
app.products.prints
I was able to simulate the error on my PC.
When you work with nested states you like app.products.print you need a intermediary view like this:
Example from a code I have on my pc that is working:
.state("admin", {
url: "/admin",
abstract: true,
views: {
"body": { templateUrl: "partials/_layoutAdmin.html" }
}
})
.state("admin.page", {
url: "/page/:idEdition",
abstract: true,
views: {
"header": { templateUrl: "partials/header.html", controller: "DefaultHeaderController" },
"content": { templateUrl: "partials/_layoutAdminEdition.html" }
}
})
.state("admin.page.create", {
url: "/create",
views: {
"content": { templateUrl: "partials/admin.page.form.html", controller: "PageFormController" }
}
})
Example of Templates
The main layout has thi
<div data-ui-view="body"></div>
The _layoutAdmin has this one
<header data-ui-view="header"></header>
<div class="container-fluid">
<div class="row">
<div data-ui-view="content"></div>
</div>
</div>
When the code enters the admin state it will load this first piece...
THEN...
<div data-ui-view="content" class="edition-form"></div>
AND THEN... the form CODE
So, in your case, you have app.products.prints:
app -> need a view -> ok you got it
app.products -> also need a view -> ok you got it
app.products.prints -> inside app.products view (products.html) you need a to show this inside it.
For simplicity, I suggest you to change it's name to app.productsPrint (without the "." and you'll be able to do it the way you are doing it right now with no impact.
Made some changes on the code you provided:
<ion-view view-title="Home">
<ion-content>
<div ui-view="myTestContent"></div>
</ion-content>
</ion-view>
Notice the ui-view="myTestContent"
and
.state('app.products.prints', {
url: "/prints",
views: {
'myTestContent': {
templateUrl: "modules/products/prints/prints.html"
}
}
});
and it worked.
So, in your case I recommend you to use productPrints instead of products.print. This nesting is used in those view inside view scenarios.
I have this in my app.js
.state('tab.events', {
url: "/events",
views: {
'tab-events': {
templateUrl: "templates/events/List.html",
controller: 'EventsListController'
}
}
})
.state('tab.events.details', {
url: "/:eventId",
views: {
'tab-events': {
templateUrl: "templates/events/Details.html",
controller: 'EventDetailsController'
}
}
})
This is List.html
...
<ion-list>
<ion-item ng-repeat="event in all_events.models" type="item-text-wrap" ui-sref="tab.events-details({eventId:event.id})" class="item item-icon-right">
{{event.name}}
</ion-item>
</ion-list>
...
This is Details.html
<ion-view title="Event">
<ion-content>
<div class="row">
<div class="col">
DETAILS HERE
</div>
</div>
</ion-content>
</ion-view>
This is my tabs.html
...
<ion-tab title="Events" icon="icon ion-calendar" id="tab-events" ui-sref="tab.events">
<ion-nav-view name="tab-events" class="slide-left-right"></ion-nav-view>
</ion-tab>
...
When clicking on an event, it doesnt slide to Details.html, Yet when i change the state and ui-sref from tab.events.details to tab.events-details and it works. Am i right in saying that by changing the details state that it is no longer a child of list?
It's an old question, but have you tried to change tab-friends to tab-friends#tab?
.state('tab.friends.detail', {
url: '/:friendId',
views: {
'tab-friends#tab': {
templateUrl: 'friend-detail.html',
controller: 'FriendDetailCtrl'
}
}
})
Should work. My problem though is that when you jump directly to this URL there is no Back-Button.
I am using ionic framework's sidemenu project to build something on top of it.
I have created this plunker to demonstrate my problem.
In the plunker, on the join page, when you click home, it shows blank screen. I can see that the HTML elements of sidemenu are all there, however, it doesnt showup on screen.
If I change my sidemenu with tabs, it works fine.
Does anyone know whats going on?
My sidemenu template looks like this:
<ion-side-menus>
<ion-pane side-menu-content>
<ion-nav-bar class="bar-dark nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-dark">
<h1 class="title">Menu</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close ui-sref="home">
Search
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
My states looks like this:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
//url: "/app",
abstract: true,
templateUrl: "tpl.tabs.html",
controller: 'AppCtrl'
})
.state('join', {
url: "/join",
views: {
'': {
templateUrl: "tpl.join.html",
controller: 'joinCtrl'
}
}
})
.state('home', {
parent: 'app',
url: "/app",
views: {
'home': {
templateUrl: "tpl.home.html",
controller:'homeCtrl'
}
}
})
.state('menu', {
parent: 'app',
url: "/menu",
views: {
'menuContent': {
templateUrl: "tpl.home.html",
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/join');
})
You had several misconceptions in your code here is how it works properly.
First of all, I recommend you to use the newest version of Ionic.
Then make sure you use the
<ion-side-menu-content></ion-side-menu-content>
and the parent/child view function of the ui-router with dot notation, for example:
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "tpl.tabs.html",
controller: 'appCtrl'
})
.state('app.join', {
url: "/join",
views: {
'menuContent': {
templateUrl: "tpl.join.html",
controller: 'joinCtrl'
}
}
});
I solved it myself.
The problem was with the naming of views of the states, which should match with the
ion-nav-view name in the abstract template.
The updated solution is here