I am trying to use ui-sref in ion-slide tag but it is not working.
Does ion-slide support ui-sref or href?
Please see the below code snippet
<ion-content scroll="false" class="animate-ripple">
<ion-slide-box show-pager="false" ion-slide-tabs slide-tabs-scrollable=false on-slide-changed="slideHasChanged($index)">
<ion-slide ion-slide-tab-label="General" ui-sref="app.holiday.generalholiday"><ion-nav-view name="general-tab"></ion-nav-view></ion-slide>
<ion-slide ion-slide-tab-label="Restricted" ui-sref="app.holiday.restrictedholiday"><ion-nav-view name="restricted-tab"></ion-nav-view></ion-slide>
<ion-slide ion-slide-tab-label="On Sunday" ui-sref="app.holiday.onsundayholiday"><ion-nav-view name="onsunday-tab"></ion-nav-view></ion-slide>
</ion-slide-box>
</ion-content>
my app.js looks like below
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: "AppCtrl"
})
.state('login', {
url: "/login",
templateUrl: "templates/login.html",
controller: "LoginCtrl"
})
.state('app.applyleave', {
url: '/applyleave',
views: {
menuContent: {
templateUrl: 'templates/applyleave.html',
controller: 'ApplyLeaveCtrl'
}
}
})
.state('app.balances', {
url: '/balances',
views: {
menuContent: {
templateUrl: 'templates/balances.html',
controller: 'BalancesCtrl'
}
}
})
.state('app.history', {
url: '/history',
views: {
menuContent: {
templateUrl: 'templates/history.html',
controller: 'HistoryCtrl'
}
}
})
.state('app.holiday', {
url: '/holiday',
views: {
menuContent: {
templateUrl: 'templates/holiday.html',
controller: 'HolidayCtrl'
}
}
})
.state('app.holiday.generalholiday', {
url: '/generalholiday',
views: {
'general-tab': {
templateUrl: 'templates/generalholiday.html',
controller: 'GeneralHolidayCtrl'
}
}
})
.state('app.holiday.restrictedholiday', {
url: '/restrictedholiday',
views: {
'restricted-tab': {
templateUrl: 'templates/restrictedholiday.html',
controller: 'RestrictedHolidayCtrl'
}
}
})
.state('app.holiday.onsundayholiday', {
url: '/onsundayholiday',
views: {
'onsunday-tab': {
templateUrl: 'templates/onsundayholiday.html',
controller: 'SundayHolidayCtrl'
}
}
})
Neither ui-sref nor href is working.
Please suggest if there is any workaround or I am missing something.
Related
In my app I am trying to dashboard.html and associated controller would load if the condition is true, but the problem is first time it will load the controller but from second time it is opening html page but not only loading controller.
What may the wrong where I did mistake please help me to find.
app.js
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AutoLoginCtrl'
})
.state('app.autoLog', {
url: '/autoLog',
controller: 'AutoLoginCtrl'
})
.state('app.search', {
url: '/search',
views: {
'menuContent': {
templateUrl: 'templates/search.html'
}
}
})
.state('app.browse', {
url: '/browse',
views: {
'menuContent': {
templateUrl: 'templates/browse.html'
}
}
})
.state('app.profileInfo', {
url: '/profileInfo/:success',
views: {
'menuContent': {
templateUrl: 'templates/profileInfo.html',
controller: 'ProfileCtrl'
}
}
})
.state('app.profile', {
url: '/profile/:data',
views: {
'menuContent': {
templateUrl: 'templates/profile.html',
controller: 'ProfileCtrl'
}
}
})
.state('app.dashboard', {
url: '/dashboard',
views: {
'menuContent': {
templateUrl: 'templates/dashboard.html'
}
}
})
.state('app.dog', {
url: '/dog',
views: {
'menuContent': {
templateUrl: 'templates/dog.html',
controller: 'ProfileCtrl'
}
}
});
$urlRouterProvider.otherwise('/app/autoLog');
loginController.js
If the below condition is true then is will call .state('app.dashboard')
if (data[0].Userprofile1 == true && data[0].Userprofile2 == true) {
$ionicLoading.hide();
console.log('My profile setup is over');
$state.go("app.dashboard");
}
dashboardController.js
app.controller('dashboardCtrl', function($scope, $http, $state, UserService) {
$scope.pageName = 'Hi i am user';
console.log('Hi home controller loading')
var userStatus = UserService.getUser()
console.log(userStatus);
if (userStatus != null) {
$scope.ersrserer = userStatus.userID;
console.log($scope.ersrserer);
} else {
console.log('its empty');
}
})
first time when it calls dashboard.html it will load controller also but from second time it will not load controller, what went wrong here?
A state requires a controller to be initialized with it, you have add the controller and inside the state you can add a resolve block:
.state('your state', {
url: '/url',
resolve: {
someName: function(inject here) {
//return something, or redirect to a state...etc
}
},
templateUrl: 'templates/something.html',
controller: 'ExampleCtrl'
})
I scaffolded an ionic V1 site using tab template and created the following link in a page.
<a href="#/tab/Test">
Test
</a>
And an empty control for "Test" page.
.controller('TestCtrl', function ($scope) {
})
The following is the router
.state('tab.test', {
url: '/test',
views: {
'tab-test': {
templateUrl: 'templates/tab-test.html',
controller: 'TestCtrl'
}
}
})
However, when testing using ionic serve, click the link doesn't go to the page. It stays in the page but the URL in the address bar changed to localhost:8100/#/tab/test.
Full router.
.config(function ($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
.state('events', {
url: '/events',
templateUrl: 'templates/events.html',
controller: 'EventsCtrl'
})
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.settings', {
url: '/settings',
views: {
'tab-settings': {
templateUrl: 'templates/tab-settings.html',
controller: 'SettingsCtrl'
}
}
})
.state('tab.test', {
url: '/test',
views: {
'tab-test': {
templateUrl: 'templates/tab-test.html',
controller: 'TestCtrl'
}
}
})
.state('tab.venues', {
url: '/venues',
views: {
'tab-venues': {
templateUrl: 'templates/tab-venues.html',
controller: 'VenuesCtrl'
}
}
})
// Each tab has its own nav history stack:
.state('tab.events', {
url: '/events',
views: {
'tab-events': {
templateUrl: 'templates/tab-events.html',
controller: 'EventsCtrl'
}
}
})
.state('tab.categories', {
url: '/categories',
views: {
'tab-categories': {
templateUrl: 'templates/tab-categories.html',
controller: 'CategoriesCtrl'
}
}
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
});
Update:
It will works if I change the router to the following. But it will be full screen and the tabs are gone.
.state('test', {
url: '/test',
templateUrl: 'templates/tab-test.html',
controller: 'TestCtrl'
})
and the link href to href="#/privacy".
Change the href url href="#/test'" instead of href="#/tab/Test"
I am using this code
<ion-tab title="" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" href="#/tab/test" ng-if="userkey">
<ion-nav-view name="tab-test"></ion-nav-view>
</ion-tab>
if you want to navigate
< ion-nav-view name="tab-test">
and state name sould be same
.state('tab.test', {
url: '/test',
views: {
'tab-test': {
templateUrl: 'templates/tab-test.html',
controller: 'TestCtrl'
}
}
})
I'm learning Ionic framefork to develop an app.
I defined an abstract state like this:
.state('app', {
url: '',
abstract: true,
templateUrl: "templates/default.html"
})
My default.html looks like this:
<ion-side-menus>
<ion-side-menu-content>
<div ui-view="headerview"></div>
<div ui-view="contentview"></div>
</ion-side-menu-content>
<div ui-view="menuview"></div>
And then I declared all my actual states
.state('app.contacts', {
url: '/contacts',
views: {
'headerview': {
templateUrl: "templates/common/header.html" ,
controller: 'headerControllers'
},
'menuview': {
templateUrl: "templates/common/menu.html"
},
'contentview': {
templateUrl: 'templates/contacts.html',
controller: 'contactControllers'
}
}
})
.state('app.partners', {
url: '/partners',
views: {
'headerview': {
templateUrl: "templates/common/header.html" ,
controller: 'headerControllers'
},
'menuview': {
templateUrl: "templates/common/menu.html"
},
'contentview': {
templateUrl: 'templates/partners.html',
controller: 'partnerControllers'
}
}
})
This works like a charm, but I noted that header and menu views will be the same in almost all of my states! That's not very DRY. There is a way to define a default that I can overwrite when needed?
Thank you,
one way to do this is to create store your path in a variable and use it for all your state.
in the begining of your function make :
var defaultHeader = 'templates/common/header.html';
var defaultHeaderController = 'headerControllers';
var defaultMenu = 'templates/common/menu.html';
then during the init of your state you will be able to do :
.state('app.contacts', {
url: '/contacts',
views: {
'headerview': {
templateUrl: defaultHeader ,
controller: defaultHeaderController
},
'menuview': {
templateUrl: defaultMenu
},
'contentview': {
templateUrl: 'templates/contacts.html',
controller: 'contactControllers'
}
}
})
.state('app.partners', {
url: '/partners',
views: {
'headerview': {
templateUrl: defaultHeader ,
controller: defaultHeaderController
},
'menuview': {
templateUrl: defaultMenu
},
'contentview': {
templateUrl: 'templates/partners.html',
controller: 'partnerControllers'
}
}
})
Like that if you want to overwrite the default view you can.
And to update it you have only one place to modify the code.
I am new to the ionic framework.
I am working on an app and I don't want tabs in the landing page.
How to hide tabs on landing page (Home page) in ionic.
In the below example its working when you click on the Scientific Facts, I am not getting how to do it can any one please help me with this issue.
Example
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "templates/home.html",
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.facts', {
url: "/facts",
views: {
'home-tab': {
templateUrl: "templates/facts.html"
}
}
})
.state('tabs.facts2', {
url: "/facts2",
views: {
'home-tab': {
templateUrl: "templates/facts2.html"
}
}
})
.state('tabs.about', {
url: "/about",
views: {
'about-tab': {
templateUrl: "templates/about.html"
}
}
})
.state('tabs.navstack', {
url: "/navstack",
views: {
'about-tab': {
templateUrl: "templates/nav-stack.html"
}
}
})
.state('tabs.contact', {
url: "/contact",
views: {
'contact-tab': {
templateUrl: "templates/contact.html"
}
}
});
$urlRouterProvider.otherwise("/tab/home");
})
.controller('HomeTabCtrl', function($scope) {
console.log('HomeTabCtrl');
})
.directive('hideTabs', function($rootScope) {
return {
restrict: 'A',
link: function($scope, $el) {
$rootScope.hideTabs = 'tabs-item-hide';
$scope.$on('$destroy', function() {
$rootScope.hideTabs = '';
});
}
};
});
I just had a similar problem... try making the Home page a separate state/template/controller outside of the nested tabs.logic. The easiest way I found to do this was in two steps:
Remove your Home from the nested .state('tabs.home', logic to just .state('home',
Remove the views: { portion and just add the templateUrl and
controller directly.
(I also moved it to the top of the list for clarity)
I've modified the code below as an example:
$stateProvider
.state('home', {
url: "/home",
templateUrl: "templates/home.html",
controller: 'HomeTabCtrl'
})
//everything below here is the same, but I left it for context
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tabs.facts', {
url: "/facts",
views: {
'home-tab': {
templateUrl: "templates/facts.html"
}
}
})
on an Ionic-angular application, I'm calling:
$state.go("main.crudlist");
and having the following exception in response:
Error: Could not resolve 'entry' from state 'main'
at Object.transitionTo (angular-ui-router.min.js:3074)
at Object.go (angular-ui-router.min.js:3007)
at angular-ui-router.min.js:4057
at angular.min.js:138
at e (angular.min.js:40)
at angular.min.js:44
What's that entry supposed to mean?
Here's the state declaration:
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'Content/Mobile/templates/login.html',
controller: 'LoginController'
})
.state('settings', {
url: '/settings',
templateUrl: 'Content/Mobile/templates/settings.html',
controller: 'SettingsController'
})
// setup an abstract state for the tabs directive
.state('main', {
url: "/main",
templateUrl: "Content/Mobile/templates/main.html",
abstract: true,
controller: 'MainController'
})
.state('main.home', {
url: '/home',
views: {
'main': {
templateUrl: 'Content/Mobile/templates/home.html',
controller: 'HomeController'
}
}
})
.state('main.settings', {
url: '/settings',
views: {
'main': {
templateUrl: 'Content/Mobile/templates/settings.html',
controller: 'SettingsController'
}
}
})
.state('main.crudlist', {
url: "/crudlist",
views: {
'main': {
templateUrl: "Content/Mobile/templates/crudlist.html",
controller: 'CrudListController'
}
}
})
In the end,it had nothing to do to angular,but to the ionic html declaration itself.
I had:
<a ui-sref="entry" class="item" ng-repeat="leaf in menuleafs()" ng-click="loadApplication(leaf)">{{leaf.title}}</a>
Switching it to:
<a class="item" ng-repeat="leaf in menuleafs()" ng-click="loadApplication(leaf)">{{leaf.title}}</a>
Did the trick.
Sorry I didn't provide enough info