When I click the emails button it should load the emails page and change the url to /emails.
When I click the texts button it should load the texts page and change the url to /texts.
What is actually happening though the email works fine, but when I click on the texts button the correct ctrl and view is loaded and works BUT my address bar keeps the last url I was on instead of changing to the text url.
My application works fine, but I have no idea what is causing this.
When I enter the url manually and hit enter the correct view and ctrl are loaded as expected, but when I click another link and then click the texts link my address bar has the last url still in it.
GOOD
The URL is wrong it should have /texts.
Email Module Code
/emails/emails.js
angular.module('rmc.contact.emails', [
'rmc.contact.emails.create',
'rmc.contact.emails.edit',
'rmc.contact.emails.preview',
'rmc.contact.emails.view'
])
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('rmc.contact.emails', {
url: '/emails',
controller: 'EmailsCtrl',
templateUrl: '/apps/rmc/contact/emails/emails.tpl.html'
});
}])
/emails/create/create.js
angular.module('rmc.contact.emails.create', [])
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('rmc.contact.emails.create', {
url: '/create?cardId',
controller: 'EmailsCreateCtrl',
templateUrl: '/apps/rmc/contact/emails/create/create.tpl.html'
});
}])
Text Module Code
/contact/texts/texts.js
angular.module('rmc.contact.texts', [
'rmc.contact.texts.create',
'rmc.contact.texts.edit',
'rmc.contact.texts.preview',
'rmc.contact.texts.view'
])
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('rmc.contact.texts', {
url: '/texts',
controller: 'TextsCtrl',
templateUrl: '/apps/rmc/contact/texts/texts.tpl.html'
});
}])
/contact/texts/create/create.js
angular.module('rmc.contact.texts.create', [])
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('rmc.contact.texts.create', {
url: '/create',
controller: 'TextsCreateCtrl',
templateUrl: '/apps/rmc/contact/texts/create/create.tpl.html'
});
}])
The menu links
/contact/contact.tpl.html
<div class='three-full-btns'>
<a ui-sref='rmc.contact.calls.create({ cardId: 0 })' ng-if="hasPermission('rmc.calls')" title='Calls' class='btn'>
<i class='icon-phone'></i>
</a>
<a ui-sref='rmc.contact.emails.create({ cardId: 0 })' ng-if="hasPermission('rmc.emails')" title='Emails' class='btn'>
<i class='icon-envelope'></i>
</a>
<a ui-sref='rmc.contact.texts.create' ng-if="hasPermission('rmc.texts')" title='Texts' class='btn'>
<i class='icon-mobile-phone'></i>
</a>
</div>
<div class='three-full-btns'>
<a ui-sref='rmc.contact.systems.create({ cardId: 0 })' title='Systems' ng-if="hasPermission('rmc.systems')" class='btn'>
<i class='icon-ok'></i>
</a>
<a ui-sref='rmc.contact.forms.create({ cardId: "" })' ng-if="hasPermission('rmc.forms')" title='Forms' class='btn'>
<i class='icon-file-text'></i>
</a>
<a ui-sref='rmc.contact.columns.view({ cardId: "" })' ng-if="hasPermission('rmc.columns')" title='Column Forms' class='btn'>
<i class='icon-columns'></i>
</a>
</div>
Look in your controllers for a $state.go() that is sending you to the state you're already in immediately after the state loads. Doing this will cause the behavior you're seeing.
I think you should explicity declare params in text route, otherwise ui-router does NOT view the param
url: '/texts?cardId'
https://github.com/angular-ui/ui-router/wiki/URL-Routing#important-stateparams-gotcha
May be problem here:
<a ui-sref='rmc.contact.texts.create({ cardId: 0 })'
...
url: '/create',
You missed ?cardId
Related
In my application, I want the nested view list-patents.htm to load when the index page loads.
My main nav is on my index.htm, with two nav items transactions and patents.
If you were to click on patents, a further two sub-menu items would load: list patents and add patents. Here you can then navigate to list-patents.htm which I want to act as the landing view.
I have tried two methods:
$urlRouterProvider.otherwise(""); which I couldn't get to work.
This method (which is in my script) loaded the nested view, but failed to load its parent nest view, the nav menu.
.state("index",
{
url: "",
templateUrl: "templates/list-patents.htm",
})
I want to keep the navigation in its own view, as I don't see the point of creating duplicate code.
Any ideas how on page load, it loads the patent-nav.htm and it's nested view list-patents.htm? Any help would be greatly appreciated
app.js
var app = angular.module('myApp', ['ngRoute', 'angularMoment', 'ui.router']);
app.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', function($stateProvider, $locationProvider, $urlRouterProvider ) {
$stateProvider
.state("index",
{
url: "",
templateUrl: "templates/list-patents.htm",
})
.state("patents", {
url: "/patents",
templateUrl: "templates/patent-nav.htm",
controller: "patentCtrl"
})
.state("patents.list", {
url: "/list-patents",
templateUrl: "templates/list-patents.htm",
controller: "patentCtrl"
})
.state("patents.add", {
url: "/add-patents",
templateUrl: "templates/add-patent.htm",
controller: "patentCtrl"
})
Views
index
<main class="container">
<nav>
<ul>
<a ui-sref="patents">Patents</a>
<a ui-sref="transactions">Transactions</a>
</ul>
</nav>
<section ui-view>
</section>
</main>
patent-nav
<nav>
<ul>
<li><a ui-sref="patents.list">List patents</a></li>
<li><a ui-sref="patents.add">Add patent</a></li>
</ul>
</nav>
<div ui-view></div>
list-patents
<div>
//just a load of content
</div>
Do this
$urlRouterProvider
.when('', '/parents/list-patents')
.when('/', '/parents/list-patents')
.otherwise('/parents/list-patents');
I am using Ionic 1.3, and I have built a side menu app.
In on of my page, I want to have Tabs to display 3 different pages.
Here is my code (app.js) :
//MAIN
.state('app', {
url: "/app",
abstract: true,
templateUrl: "views/app/side-menu.html",
controller: 'AppCtrl'
})
//PROFIL
.state('app.profil', {
url: "/profil",
abstract: true,
views: {
'menuContent': {
templateUrl: "views/app/profil/tabs.html",
}
}
})
//PROFIL TAB 1
.state('app.profil.tab1', {
url: "/tab1",
views: {
'tabProfilContent': {
templateUrl: "views/app/profil/tab1.html",
controller: 'ProfilCtrl'
}
}
})
And here's my tabs.html view :
<ion-view class="profile-view">
<ion-nav-title>
<span>Votre profil</span>
</ion-nav-title>
<ion-header>
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
<div class="tabs">
<a class="tab-item" ui-sref="app.profil.tab1">
Tab 1
</a>
<a class="tab-item" ui-sref="app.profil.tab2">
Tab 2
</a>
<a class="tab-item" ui-sref="app.profil.tab3">
Tab 3
</a>
</div>
</div>
</ion-header>
<ion-nav-view name="tabProfilContent"></ion-nav-view>
</ion-view>
It works, but, is there a way to set the status of tab ? The tabs are not active while I change Tab. Is this the correct way to achieve it ?
would anyone be able to help me on this issue I am having?
I have a NavCtrl for manage my active tag, I was able to change the active tab when click on the menu item, however when I click on the link in the body views, it take me to the page I want to, but the active tag is not change.
//controller for nevigation menu
sp.controller('NavCtrl', ['$scope', 'auth', '$window','$rootScope', function ($scope, auth, $window,$rootScope) {
$scope.LogOut = auth.logOut;
$scope.isLoggedIn = auth.isLoggedIn;
$scope.tab = $rootScope.navTav;
$scope.toTop = function(){
$window.scrollTo(0, 0);
};
}]);
I try to use the $rootScope to set the navTab, but it's still not working
//setting root scope
sp.run(function($rootScope) {
$rootScope.navTav = 1;
})
ui-Router
.state('qaanswer', {
url: '/qa/{quesId}',
views: {
view50': {
templateUrl: './qa/qaanswer.html',
controller: 'QAAnswerCtrl'
},
'view60': {
templateUrl: './shareviews/activityupdates.html',
controller: 'HomeCtrl'
}
},
onEnter:['$rootScope',function($rootScope){
$rootScope.navTav = 5;
}]
Thank you so much for the help
Update HTML :
<body ng-controller="NavCtrl">
<!-- Desktop Menu -->
<div>
<div>
<ul>
<a href="#/home" ng-class="{active: navTab === 1}" ng-click="navTab = 1">
<li>Home</li>
</a>
<a href="#/qa" ng-class="{active: navTab === 2}" ng-click="navTab = 2">
<li>QA</li>
</a>
</ul>
</div>
</div>
<div>
<div>
<div class="row">
<div ui-view="view50"></div>
<div ui-view="view60"></div>
</div>
</div>
</div>
</body>
Working plunker
You can simplify your implementation and have no issues. Simply use the $rootScope variable directly in your template along side ng-class like so:
<body ng-controller="NavCtrl">
<a ng-class="{red: $root.navTab===0}" ui-sref="first">first</a>
<a ng-class="{red: $root.navTab===1}" ui-sref="second">second</a>
<div ui-view></div>
</body>
Then update $rootScope in your controllers.
.controller('NavCtrl', function($scope, $rootScope) {});
.controller('FirstCtrl', function($scope, $rootScope) {
$rootScope.navTab = 0;
});
.controller('SecondCtrl', function($scope, $rootScope) {
$rootScope.navTab = 1;
});
Your states get to stay relatively simple:
.state('first', {
url: '/first',
templateUrl: 'first.html',
controller: 'FirstCtrl'
})
.state('second', {
url: '/second',
templateUrl: 'second.html',
controller: 'SecondCtrl'
})
plunker
Ideally you would make a directive for such a task, and avoid using $rootScope. A simple way to do this is to broadcast a message whenever you land on a new page, then listen on that event in your tab directive and flip the correct tab as active.
My project has the file home, page1, page2.
My home page has a different header layout than the rest of my pages. So, it is a separate html file. page1 and page 2 is using ui routing to load in the content of the page, but the header and footer are the same.
My Question is: if I am on the home page and click btn 1. how do I get it to load in the content of page1? (It will load index.html, but no content of btn1.)
I'm not sure if passing an id to the index.js is a solution and I'm not sure how to even do that. Would it make more sense to just make the entire thing a SPA?
My home.html with the buttons:
<a type="text/html" href="home.html" class="button home_btn">Home</a>
<a type="text/html" href="index.html" class="button my_btn1">Page1</a>
<a type="text/html" href="index.html" class="button my_btn2">Page2</a>
My idex.html:
<body>
<div class="container" ng-app="app">
<header ng-include="'html/header.html'"></header>
<div ui-view></div>
<footer ng-include="'html/footer.html'"></footer>
</div>
</body>
<script src="vendors/angular/angular.js"></script>
<script src="vendors/angular-ui-router/release/angular-ui-router.js </script>
<script src="scripts/index.js"></script>
my header.html:
<div id="headerLinks">
<a type="text/html" href="home.html" class="button home_btn">Home</a>
<a type="text/html" ui-sref="page1" class="button my_btn1">Page1</a>
<a type="text/html" ui-sref="page2" class="button my_btn2">Page2</a>
</div>
</div>
my index.js:
var app = angular.module('app', ['ui.router']);
app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('Page1', {
url: 'Page1',
templateUrl: 'Page1.html',
controller: 'Page1Ctrl'
})
.state('Page2', {
url: 'Page2',
templateUrl: 'Page2.html',
controller: 'Page2Ctrl'
})
}])
I"m kinda confused by what I was asking now that I look at it. I believe I was asking how to build a router with multiple pages. I got that to work. if this doesn't help, I'll see if I can find a resource or explain it better.
import angular-ui-router.
<script src="vendors/angular-ui-router/release/angular-ui-router.js" type="text/javascript"></script>
This is what my index.js file now looks like. it has multiply views which allow for different header or content or footer or whatever.
var app = angular.module('app', [
'ui.router',
'ctrls'
]);
app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider, $state) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home',{
url: '/home',
views: {
'header': {
templateUrl: 'html/headerHome.html',
controller: 'headCtrl'
},
'content': {
templateUrl: 'home.html',
//controller: 'ContentController'
}
}
})
.state('page1', {
url: '/page1',
views: {
'header': {
templateUrl: 'html/header.html',
controller: 'headCtrl'
},
'content': {
templateUrl: 'page1.html',
controller: 'page1Ctrl'
}
}
})
.state('page2', {
url: '/page1',
views:{
'header':{
templateUrl: 'html/header.html',
controller: 'headCtrl'
},
'content':{
templateUrl: 'page2.html',
controller: 'page2Ctrl'
}
}
})
Within the Ionic Framework, you can setup tabs. The pages within the tabs can easily transition using a slide-left-right or some other type of transition. This makes the application feel smooth and thought-out.
The issue that I have is that the pages associated with each tab, once clicked from the tab menu, do not transition at all, there is just boom: a page.
I found a pen on codepen (link to codepen demo) that can replicate this effect as I want it (to some degree), but I cannot replicate it in any scenario, much less the Ionic rc0 (1.0) version.
The codepen code uses an animation that seems to not work elsewhere:
<ion-nav-view animation="slide-left-right"></ion-nav-view>
Please assist.
I haven't tried to get that exact example working, but I achieved a similar effect in one of my apps by giving all the tabs the same view name:
app.js
$stateProvider
.state('signin', {
url: "/sign-in",
templateUrl: "sign-in.html",
controller: 'SignInCtrl'
})
.state('forgotpassword', {
url: "/forgot-password",
templateUrl: "forgot-password.html"
})
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'tab-view': {
templateUrl: "home.html",
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.facts', {
url: "/facts",
views: {
'tab-view': {
templateUrl: "facts.html"
}
}
})
.state('tabs.facts2', {
url: "/facts2",
views: {
'tab-view': {
templateUrl: "facts2.html"
}
}
})
.state('tabs.about', {
url: "/about",
views: {
'tab-view': {
templateUrl: "about.html"
}
}
})
tabs.html
<ion-tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive" animation="slide-left-right">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="tab-view"></ion-nav-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios7-information" href="#/tab/about">
<ion-nav-view name="tab-view"></ion-nav-view>
</ion-tab>
</ion-tabs>
Notice the name "tab-view" for each state and again as the name attribute on the ion-nav-view in each tab.
This helped me to find a solution https://github.com/driftyco/ionic/issues/2997 . The trick is to load all tabs in single view. You can't use ion-tabs directive to achieve that, you you will have to create your tab container using regular html:
<ion-view title="Tabs Controller">
<!-- All tabs are going to load here -->
<ion-nav-view name="menuContent"></ion-nav-view>
<!-- TABS -->
<div class="tabs-stable tabs-icon-top tabs-bottom tabs-standard">
<div class="tab-nav tabs">
<a class="tab-item" ng-click="goTabForums()" ng-class="{ active : settings.isTab1}">
<i class="icon bb-ios-forums"></i>
<span translate="TABS.FORUMS_TAB"></span>
</a>
<a class="tab-item" ng-click="goTabGroups()" ng-class="{ active : settings.isTab2 }">
<i class="icon bb-ios-forums"></i>
<span translate="TABS.GROUPS_TAB"></span>
</a>
<a class="tab-item" ng-click="goTabTopics()" ng-class="{ active : settings.isTab2 }">
<i class="icon bb-ios-topics"></i>
<span translate="TABS.TOPICS_TAB"></span>
</a>
<a class="tab-item" ng-click="goTabNotifications()" ng-class="{ active : settings.isTab2 }">
<i class="icon bb-ios-notifications"></i>
<span translate="TABS.NOTIFICATIONS_TAB"></span>
</a>
<a class="tab-item" ng-click="goTabProfile()" ng-class="{ active : settings.isTab2 }">
<i class="icon bb-ios-my-profile"></i>
<span translate="TABS.MY_PROFILE_TAB"></span>
</a>
<a class="tab-item" ng-click="goTabMore()" ng-class="{ active : settings.isTab2 }">
<i class="icon bb-ios-more"></i>
<span translate="TABS.MORE_TAB"></span>
</a>
</div>
</div>
your tabs controller should look like this:
.controller('tabsCtrl', function($scope, $ionicConfig, $state) {
$scope.goTabForums = function(){
$ionicConfig.views.transition('platform');
$state.go('tabsController.forums');
}
$scope.goTabGroups = function(){
$ionicConfig.views.transition('platform');
$state.go('tabsController.groups');
}
$scope.goTabTopics = function(){
$ionicConfig.views.transition('platform');
$state.go('tabsController.topics');
}
$scope.goTabNotifications = function(){
$ionicConfig.views.transition('platform');
$state.go('tabsController.notifications');
}
$scope.goTabProfile = function(){
$ionicConfig.views.transition('platform');
$state.go('tabsController.profile');
}
$scope.goTabMore = function(){
$ionicConfig.views.transition('platform');
$state.go('tabsController.more');
}})
And finally routs:
$stateProvider
.state('tabsController.forums', {
url: '/forums',
views: {
'menuContent': {
templateUrl: 'templates/forums.html',
controller: 'forumsCtrl'
}
}})
.state('tabsController.topics', {
url: '/topics',
views: {
'menuContent': {
templateUrl: 'templates/topics.html',
controller: 'topicsCtrl'
}
}})