I have just started to adapt the sample angular/ionic tab navigation app and have run into a problem.
When I click on a link in one view (a list of all journeys), I should be taken to a screen with details about that particular journey. (Adapted from the 'chats' in the sample app.
It doesn't quite work however. The URL changes to the expected URL but the view/page doesn't change at all. When I try to refresh the page, I am taken back to my default state/page.
The controllers are:
.controller('JourneysController', function($scope, $log, JourneyHandler) {
'use strict';
$log.debug('Activating the journey controller');
$scope.journeys = JourneyHandler.getJourneys();
})
.controller('JourneyDetailController', function($scope, $stateParams, $log) {
'use strict';
$log.debug('Activating the journey detail controller');
$scope.journey = {
journeyId: 0,
journeyStart: new Date()
};
})
The app.js defines the states as:
.state('tab.journeys', {
url: '/journeys',
views: {
'tab-journeys': {
templateUrl: 'templates/tab-journeys.html',
controller: 'JourneysController'
}
}
})
.state('tab.journey-detail', {
url: '/journey',
views: {
'tab-journey-detail': {
templateUrl: 'templates/journey-detail.html',
controller: 'JourneyDetailController'
}
}
});
$urlRouterProvider.otherwise('/tab/dash');
and the relevant templates are:
tab-journeys.html
<ion-view view-title="My Journeys">
<ion-content>
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="journey in journeys" type="item-text-wrap" href="#/tab/journey">
<h2>{{journey.journeyId}}</h2>
<p>{{journey.routeId}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive">
Delete
</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
and journey-detail.html
<ion-view view-title="Journey Detail">
<ion-content>
<p>This is where the journey details will go.</p>
</ion-content>
</ion-view>
There are no errors in the console so I really can't understand why it's not working.
When I encountered this same problem, I discovered that the error occurs because the controller didn't load.
Comment the controller in the state declaration and see if it works. You will need to check the controller.
Related
I'm trying to go to a page(template) using $state.go.
Controller
.controller('NavCtrl', function($scope, $location, $state) {
$scope.openDaily = function() {
$state.go('daily');
};
})
It works but for only a millisecond or something as it's redirected BACK to the '/select' page because the $state.otherwise says so.
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('select', {
url: '/select',
templateUrl: 'templates/select.html',
controller: 'selectController'
})
.state('daily', {
url: '/daily',
templateUrl: 'templates/daily.html',
controller: 'dailyController'
});
$urlRouterProvider.otherwise('/select');
})
What is causing this please?
UPDATE
index.html
<body ng-app="starter" animation="slide-left-right-ios7">
<ion-nav-view>
</ion-nav-view>
</body>
select.html
<ion-view title="Select" ng-controller="NavCtrl">
<ion-content>
<div class="list-card" ng-click="openDaily()">
<a href='#' class="item item-icon-left">
<i class="icon ion-home"></i>
Personal
</a>
</div>
</ion-content>
<div class="bar bar-footer bar-balanced">
<div class="title">Add File/Folder</div>
</div>
</ion-view>
and daily.html(template):
<ion-view title="Select" ng-controller="NavCtrl">
</ion-view>
Using Ionic Framework.
Please remove href='#' from <a> tag. Because this will call default state(Here it is select state).
Looks like a cache problem, because everything looks correct, make sure the file is changed on you browser inspector and anything is broken on the console.
P.S: You can use also ui-sref="daily", if you just want go to the page.
I have my controller as "chatnow" and replacing the $scope.iid for title using $stateParams. But the chat messages are updated in a separate variable. I can update the messages at the interface using the following code but title not printed. When i remove the controller name title gets printed and not the messages. Help me out where i am going wrong.?
App.js :
.state('chatnow', {
url: '/chatnow/:jid',
templateUrl: 'templates/chatnow.html',
controller: 'ChatNow'
});
Controller.js
.controller('ChatUserClick', function($rootScope, $scope, $stateParams, $ionicPopup, $state, SendMessage, SharedProperties, ChatMessageService, Profile) {
$scope.iid = $stateParams.jid;
$scope.userJid = $stateParams.jid;
var sharedData = SharedProperties.sharedObject;
var MC = this;
MC.list = ChatMessageService.getList($scope.curchatjid);
})
Chat.html
<ion-view title="{{MC.iid}}" ng-controller="ChatNow as MC">
<ion-content class="chat">
<ion-list>
<li class="item chat-msg-wrap" ng-class="{'msg-send': todo.dt == 'send'}" ng-repeat="todo in MC.list track by $index">
<div class="chat-msg">{{todo.msg}}</div>
</li>
</ion-list>
</ion-content>
</ion-view>
It is because you are using ng-controller with route/ state configuration. Remove the ng-controller from your view. When you use the ng-view directive, don't use the ng-controller along with it. The controller will be specified from the state configuration, in your case:
.state('chatnow', {
url: '/chatnow/:jid',
templateUrl: 'templates/chatnow.html',
controller: 'ChatNow as MC'
});
The answer to this has been mentioned in this: https://stackoverflow.com/a/36881457/3878940
I'm working on an Ionic app and I fully working left menu with working states.
Here's the menu code:
<ion-side-menu side="left">
<ion-header-bar class="bar-royal">
<h1 class="title">Example</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ng-repeat="test in data"
ng-switch="test.ID"
ng-href="{{test.ID == 0 ? '#/app/test' : '#/app/details/' + test.iID}}"
class="item item-icon-right">
<div ng-switch-when="0"><span>{{test.Name}}</span></div>
<div ng-switch-default><span>{{test.Name}}</span>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
very basic setup.
and the code with the states (coffescript):
angular.module('hgApp', ['ionic'])
.config [
'$stateProvider'
'$urlRouterProvider'
($stateProvider, $urlRouterProvider) ->
$stateProvider.state('app',
url: '/app'
abstract: true
templateUrl: './sections/menu/menu.html'
controller: 'menuList'
).state('app.details',
url: '/details/:testID'
views:
'menuContent':
templateUrl: './sections/details/testDetails.html'
controller: 'testDetails'
Now, here my problem:
I can navigate to app/details/{testID} from the list on the left menu, or from links that I have on my home page.
I need to be able to add a back button to the top bar of app/details/{testID} only if I got to the page using the links on the home page, but not if i got there from the left menu list.
both the menu list and the links on the home page use as href "#/app/details/{{test.ID}}"
How can I do that? I really have no clue at all.
Thanks in advance for any help.
Hi i had a similar situation where i had to hide the button if the form was editable so i did the following
<ion-nav-back-button ng-show="!$root.hideBack"></ion-nav-back-button>
Controller.js
$scope.makeEditable = function () {
$scope.isEditable = true;
$rootScope.hideBack = true;
};
so if the fields were editable the back button would dissapear. I hope this is of any help.
Another example is:
Use $ionicHistory in your controller before calling $state.go('app.details'). I guess you have different controller for Home page where you use $stage.go to go to the details page? so the code should look something like
app.controller('HomeCtrl', ["$scope", "$ionicHistory", function($scope, $ionicHistory) {
$scope.goToDetails = function() {
$ionicHistory.nextViewOptions({
disableBack: true
});
$state.go('app.details');
}
}]);
Html
<button ng-click="goToDetails()"></button>
Interesting question by the way
I think you can accomplish the behaviour you want using $broadcast
Basically you have a function that is called when you click on the link that will tell the testDetails controller 'hey, we came from a link, do your stuff'
The testDetails controller will be expecting this call and display the button accordingly
Raw code:
app.controller('AnyCtrl',
function AnyCtrl ($scope) {
// Call this code on link click
$scope.$broadcast('fromlink', 'Some data');
});
app.controller('testDetails',
function testDetails ($scope) {
$scope.$on('fromlink', function (event, data) {
// Add button. Profit
});
});
You can find a link to a small article covering all possibilities here
https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/
I've created a new app using the following command:
ionic start myApp sidemenu
added a home.html page to the templates folder, added the following to the app.js file:
.state('app.home', {
url: '/home',
views: {
'menuContent': {
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
}
}
})
and added the following controller:
.controller('homeCtrl', function ($scope) {
ionic.Platform.ready(function () {
$scope.me = "my name";
//ionic.Platform.fullScreen(true, false);
//$cordovaStatusbar.hide();
//StatusBar.hide();
});
})
my home.html:
<ion-view>
<ion-content>
<h3 style="margin-top:30px;">User Name {{me}}</h3>
<select class="center" style="margin-top:10px;">
<option>Blue</option>
<option>Green</option>
<option>Red</option>
</select>
</ion-content>
</ion-view>
My question is how can I hide this top bar:
just from a single page\view\controller?
UPDATE
changed my controller to this:
.controller('homeCtrl', function ($scope, $ionicNavBarDelegate) {
$ionicNavBarDelegate.showBar(false);
$scope.me = "my name";
})
but still doesn't work even though the docs say it's the correct way.
Just try this,
<ion-view hide-nav-bar="true">
<ion-content>
<h3 style="margin-top:30px;">User Name {{me}}</h3>
<select class="center" style="margin-top:10px;">
<option>Blue</option>
<option>Green</option>
<option>Red</option>
</select>
</ion-content>
</ion-view>
or
add this line in your contorller
$ionicNavBarDelegate.showBar(false);
Refer
I have this page which links the input.countNum scope variable to the input with ng-model. The value which is displayed on the button shows fine. When you click the button on the first page, it navigates to the second page which also displays the scope variable. But the variable is reset to the default declaration value in the controller code.
How do I maintain the scope value from ng-model between pages within the same controller?
tab-dash.html
<ion-view view-title="Test">
<ion-content class="padding">
<div class="list">
<label class="item item-input">
<span class="input-label">Count</span>
<input class="text-right" type="number" pattern="[0-9]*" ng-model="input.countNum">
</label>
</div>
<button class="button button-full button-positive" ng-click="create()" ui-sref="tab.count">
Count is ({{input.countNum}})
</button>
</ion-content>
</ion-view>
controller.js
.controller('DashCtrl', function($scope) {
$scope.input = {
countNum: 1
};
$scope.create = function() {
// Logic here
};
})
count.html
<ion-view view-title="Count">
<ion-nav-bar class="bar-energized">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-content class="padding">
<button class="button button-full button-positive">
({{input.countNum}})
</button>
</ion-content>
</ion-view>
app.js
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.count', {
url: '/count',
views: {
'tab-dash': {
templateUrl: 'templates/count.html',
controller: 'DashCtrl'
}
}
})
Controllers are not shared between pages - a new instance is created each time the controller is used. You should not expect to be able to share data from a controller with anything outside the scope of that controller either. If you need to share data between pages or controllers, you should use a service or "value" object to maintain that state. Another option would be passing the data between the pages using the state params:
ui-sref="tab.count({ input: input })"
Note that Ionic uses the Angular UI Router project for its navigation logic, so the documentation there also applies to using Ionic.