Having problem with my angular app, when I refresh page it doesn't show me correct page. It looks like the way I pass parameter to the page is not right.
So I have my state in the ui-router:
.state('stateDashboard', {
url: '/dashboard',
templateUrl: '/templates/dashboard.html',
controller: 'dashboardController'
})
In the page where I have list of Dashboards:
<div class="tile" ng-repeat="d in dashList" ng-class="[d.tileColour, d.tileSize]" ui-sref="stateDashboard" ng-click="setDashboard(d.id)">
<div class="tile-body">
<i class="fa fa-dashboard"></i>
</div>
<div class="tile-object">
<div class="name">
{{d.name}}
</div>
</div>
</div>
where setDashboard(id) sett id to $rootScope.dashId
and in my controller to display dashboard I have:
Dashboards.getDashboard({ id: $rootScope.dashId }).$promise.then(function (result) {
$rootScope.model = result;
}
So now when I refresh the page $rootScope.dashId is undefined so doesn't display page correctly. How can I fix it?
Add your dashId to the URL so you can pass it when changing dashboard and/or refreshing the page. So avoid calling setDashboard because it will only have effect until you reload the page.
.state('stateDashboard', {
url: '/dashboard/:dashId',
templateUrl: '/templates/dashboard.html',
controller: 'dashboardController'
})
Now inside your controller you can get it like this. No need to use the $rootScope.
Dashboards.getDashboard({ id: $stateParams.dashId }).$promise.then(function (result) {
$rootScope.model = result;
}
Related
I am trying to get the value of $stateParams in my controller but it is always undefined but I can see there is a value in my view.
As you can see there are values on each link.
app.js
.state('app.help', {
url: '/help',
views: {
'menuContent': {
templateUrl: 'templates/help.html'
}
}
})
.state('app.help-replies', {
url: '/help/:id',
views: {
'menuContent': {
templateUrl: 'templates/help-replies.html'
}
}
})
html view
this is the where the lists of data displays
<div ng-repeat="x in helpData">
<a class="row responsive-xs" href="#/app/help/{{x.id}}">
<div class="col"><h6>{{x.subject}}</h6></div>
</a>
</div>
this is where the single view of the clicked data in the above view.
<div class="row responsive-xs" ng-init="viewHelpAndReplies()">
<div class="col">
<h5>Subject: {{$scope.help_id}}</h5>
</div>
</div>
controller.js
$scope.viewHelpAndReplies = function(){
console.log($stateParams.id);
}
I think you should use ui-sref to pass data
<div ng-repeat="x in helpData">
<a class="row responsive-xs" ui-sref="app.help-replies({id: x.id})">
<div class="col"><h6>{{x.subject}}</h6></div>
</a>
</div>
and retrieve id with
$scope.id = $stateParams.id;
Okay I think I got what I needed. But I am not sure if this is good, but for me it is okay because it works.
Here's what I do:
I change the href
href="#/app/help/{{x.id}}"
into ng-click and create a function
ng-click="doViewHelp({id:x.id})"
and create function in my controller.js:
$scope.doViewHelp = function(data){
$state.go('app.help-replies');
// some codes...
}
Thanks.
I am creating an Ionic app, and have a very basic routing scenario, I am trying to go to a detail page with an id param, which is optional.
Navigation occurs succesfully everytime, but when I try and access the value in the controller it remains the same as whatever the first time request was.
For e.g navigating to playlists/1 would output Object {playlistId: "1"} then when navigating to playlists/2 it would again output Object {playlistId: "1"}
I have tried so many things, but can't find the issue help appreciated.
My route setup looks like this:
.state('app.single', {
url: '/playlists/:playlistId',
views: {
'menuContent': {
templateUrl: 'templates/playlist.html',
controller: 'PlaylistCtrl',
resolve: {
playlistId: function($state, $stateParams) {
return $stateParams.playlistId; // note this changes every time. I put this here for testing.
}
}
}
}
})
And my controller:
.controller('PlaylistCtrl', function($scope, $stateParams) {
console.log($stateParams);
Navigating using:
<div class="card">
<div class="item item-text-wrap" ui-sref="app.single({playlistId: undefined})">
Test
</div>
</div>
<div class="card">
<div class="item item-text-wrap" ui-sref="app.single({playlistId: 1})">
Test 1
</div>
</div>
<div class="card">
<div class="item item-text-wrap" ui-sref="app.single({playlistId: 2})">
Test 2
</div>
</div>
It sounds like you're hitting the cache. You can disable it by adding cache:false to your state:
.state('app.single', {
cache: false, //add this
url: '/playlists/:playlistId',
views: {
'menuContent': {
templateUrl: 'templates/playlist.html',
controller: 'PlaylistCtrl',
resolve: {
playlistId: function($state, $stateParams) {
return $stateParams.playlistId; // note this changes every time. I put this here for testing.
}
}
}
}
})
First off I am new to angular and I am inheriting this project. This seems like it should be deathly easy to say if the state is this show this, but I keep failing :]
angular.module('myApp')
.config(function ($stateProvider) {
$stateProvider
.state('page1', {
url: '/page1',
data: etc..................
},
.state('page1.nest', {
url: '/page1/nest',
data: etc..................
},
.state('page2', {
url: '/page2',
data: etc..................
},
Each page has it's own controller. page1 and page1 nest share the same templateUrl: 'scripts/app/page.html'. The div below lives on the page.html.
How do I simple say...
<div>
<span ng-show="if state == page1">Page 1</span>
<span ng-show="if state == page1/nest">Page 1 Nest</span>
</div>
<div>
Same Content on both here
</div>
I think it has something to do with $stateParams needing to be exposed to the scope in the controller?
You'll want to use the $state service provided by UI-Router
Check the documentation out here.
You'll do something like
In your controller. Inject $state then set it to a scope variable
$scope.state = $state
Then you can do something like this.
<span ng-show="state.is('page1')">Page 1</span>
Alternatively obviously you can use a function in your controller.
<span ng-if="inState('page1')">Page 1</span>
In controller
$scope.inState = function(state){
return $state.is(state);
}
Let's start first by formatting your code a little better and closing parens where they should be closed.
angular.module('myApp')
.config(function($stateProvider) {
$stateProvider
.state('page1', {
url: '/page1',
template: 'templates/page1.html',
data: etc..................
}),
.state('page1.nest', {
url: '/page1/nest',
template: 'templates/page1.nest.html',
data: etc..................
}),
.state('page2', {
url: '/page2',
template: 'templates/page2.html',
data: etc..................
});
Typically you would have these various templates somewhere in your project structure like
/app
/templates
Then you have your index page...
<html ng-app>
<body>
<div ng-controller="myController">
<div ui-view></div> <!-- this is where the page1 or page2 state gets loaded -->
</div>
</body>
</html>
Then in your page1 or page2 html files
<div>
... content goes here ...
<div ui-view></div> <!-- nested content will go in here -->
</div>
Then in your page1.nest.html
<div>
... all your nested content goes here
</div>
I want to create an event page and event detail page in angular. I created my states like this in my app.js
.state('app.event', {
url: "/event",
views: {
'menuContent': {
templateUrl: "views/event.html",
controller: "eventController"
}
}
})
.state('app.eventDetail', {
url: "/eventDetail/:eventId",
views: {
'menuContent': {
templateUrl: "views/eventDetail.html",
controller: "eventDetailController"
}
}
})
I m getting my events in my views/event.html page like this
<div class="list" ng-controller="EventController">
<div class="item item-avatar item-left" ng-repeat="EventName in Events track by $index">
<p>{{ EventName }}</p>
<p>{{ EventId }}</p>
</div>
</div>
My question is how can i redirect my Event page to EventDetail page with event Id ?
And my other question is how can i get that id in my EventDetail page ?
You could use ui-sref like this:
<div class="list" ng-controller="EventController">
<div class="item item-avatar item-left" ng-repeat="EventName in Events track by $index">
<a ui-sref="app.eventDetail({eventId: EventId})">{{ EventName }}</a>
</div>
</div>
Clicking the link for an event should redirect to the details page and then to get the parameter from the url you would use the $stateParams service:
app.controller('eventDetailController', function($scope, $stateParams) {
$stateParams.eventId;
});
I suspect that there may be a few errors in your code. So if you experience any issues with the above, please update your question with the code for both controllers and I'll try to update my answer to account for them.
I'm trying to implement a facebook login for my ionic app based on this tutorial Coenraets fb tutorial, but I am coming across some problems.
I use tabs in my app, but when I try and redirect a user to the login page (tab) if they are not logged in, the login page shows as being blank (the navigation bar is still at the top though). If I refresh the page though, the login page then shows correctly. I know it is at least trying to redirect the page because I can't go to other tabs, just always this blank login tab.
Here is where I declare my tabs:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
//setup an abstract state for the tabs directive
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tab.login', {
url: '/login',
views: {
'tab-login': {
templateUrl: 'templates/tab-login.html',
controller: 'AppCtrl'
}
}
})
//example of another state
.state('tab.map', {
url: '/map',
views: {
'tab-map': {
templateUrl: 'templates/tab-map.html',
controller: 'MapController'
}
}
})
Here is what my Login Tab HTML looks like:
<ion-view title="Login" name="tab-login" hide-back-button="true" style="background: #1b5a83" hide-nav-bar="true">
<ion-content has-header="true" padding="true" ng-controller="AppCtrl">
<div class="list list-inset" style="background: #1b5a83">
<div class="item item-image" style="border:none;margin-top:50px;">
<img src="img/sociogram.jpg"/>
</div>
<button class="button button-block button-light" ng-click="facebookLogin()">
<i class="icon ion-social-facebook"></i>
Login with Facebook
</button>
</div>
</ion-content>
And here is where my redirection takes place inside the .run function:
.run(function($rootScope, $state, $ionicPlatform, $window, OpenFB) {
OpenFB.init(fbappid, 'http://localhost:8100/oauthcallback.html', window.sessionStorage);
$ionicPlatform.ready(function() {
$rootScope.$on('$stateChangeStart', function(event, toState) {
if (toState.name !== "tab.login" && toState.name !== "tab.logout" && !$window.sessionStorage['fbtoken']) {
$state.go('tab.login');
event.preventDefault();
}
});
$rootScope.$on('OAuthException', function() {
$state.go('tab.login');
});
})
Any ideas where I am going wrong??? Thanks
Make sure that in your templates/tabs.html is a named <ion-nav-view>, because in your state 'tab.login' you tell UI router to look for a view placeholder with the name 'tab-login'. So you need to define this in your template:
<ion-nav-view name="tab-login">
Or you change your state definition to use an empty view name, so it references your unnamed <ion-nav-view> in the parents state 'tab':
.state('tab.login', {
url: '/login',
views: {
'': {
templateUrl: 'templates/tab-login.html',
controller: 'AppCtrl'
}
}
})
In your linked example there is only one named view vor all states, see https://github.com/ccoenraets/sociogram-angular-ionic/blob/master/www/templates/menu.html#L7
Have a look at multiple nested views in UI router here: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views