I'm REALLY frustrated right now. I try to change the state in my ionic app for more than 5 hours now.
Here is what I have.
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.issues', {
url: '/issues',
views: {
'tab-issues': {
templateUrl: 'templates/tab-issues.html',
controller: 'IssuesController'
}
}
})
.state('tab.issue-detail', {
url: '/issues/:vertragsNr',
views: {
'tab-issues': {
templateUrl: 'templates/issue-details.html',
controller: 'IssueDetailsController'
}
}
})
.state('tab.issue-steps', {
url: '/issues/:vertragsNr/steps',
views: {
'tab-issues': {
templateUrl: 'templates/issue-steps.html',
controller: 'IssueStepsController'
}
}
})
when I open the url http://localhost:8100/#/tab/issues/1/steps manually in the browser everything is fine the controller get loaded and everything works as expected.
But when I do
$scope.goto = function(){
$state.go('tab.issue-steps','{vertragsNr:1}')
}
in the IssueDetailsController I see a transition and the IssueStepsController gets loaded but the view doesnt change.
I also tried to do a
ui-sref="tab.issue-steps({ vertragsNr: r.vertragsNr})"
but when I click the button nothing is happening. I see that in the source of the page an href="#/tab/issues/1/steps" gets created on the element but it doesnt change the view.
I also tried
.state('tab.issue-steps', {
url: '/steps',
views: {
'tab-issues': {
templateUrl: 'templates/issue-steps.html',
controller: 'IssueStepsController'
}
}
})
but it still isnt redirecting.
I also tried:
$location.url("tab/issues/1/steps");
which also isnt working
I dont understand why it has to be so complicated to JUST CHANGE A SIMPLE VIEW!
I dont want any subviews in the details view. I just want to open the steps view.
Ok, to clarify, I need to load the steps view into the tabs-issues view which is the content of my tab-control and this is not working from a subview.
I made a plunker with the issue: http://plnkr.co/edit/YK7Fp3vUhEPGZeYtOF9Y?p=info
strange thing is on the second click everything work on the plunker. But the code is exactly the same code as in my application.
I've noticed in that plunker you're still referencing an old version of the framework:
<script src="http://code.ionicframework.com/1.0.0-beta.5/js/ionic.bundle.min.js"></script>
I would change that to the latest stable release:
<link href="http://code.ionicframework.com/1.1.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.min.js"></script>
Then you have to fix the view issue-details.html. You have something like this in that html view:
<div class="list card" ui-sref="tab.issue-detail({ vertragsNr: r.vertragsNr})">
....
</div>
you don't really need
ui-sref="tab.issue-detail({ vertragsNr: r.vertragsNr})"
cause it's basically pushing the page back when redirecting.
Just remove it so that your view looks like this:
<ion-view view-title="Ausgaben">
<ion-content class="padding">
<div class="list card">
<div class="item item-divider">{{r.title}}</div>
<div class="item item-body">
<div>
<div><b>Vertragsbeginn:</b> {{r.rentalBegin}}</div>
<div><b>Objekt:</b> {{r.objekt}}</div>
<div><b>Abholer:</b> {{r.abholer}}</div>
<div class="list">
<button class="item item-icon-left" ng-click="goto()" ng-repeat="m in r.machines" ng-disabled="m.abgabeDatum!==null">
<i class="icon balanced" ng-class="{'ion-checkmark': m.abgabeDatum!==null}"></i>
{{m.title}}
</button>
</div>
</div>
</div>
</div>
</ion-content>
</ion-view>
and everything should work as expected.
PS: I've removed hide-nav-bar="true" directive in the view issue-steps.html just to make sure that the navigation works properly. It works anyway even if you add it back.
PPS: As you might have noticed there are a few differences in the way the app looks with the new version 1.1.0 of the framework.
A few things have changed since the beta.
.state("newUtilities", {
url: "/newUtilities",
templateUrl: "app/admin/modules/newUtility/view/newUtilities.html",
controller: "NewUtilitiesController",
resolve: load(['myProject.newUtilities'])
})
Related
I have a view that shows a list of users, and i want to open a User Details page, when the user clicks on the link.
It loads the "Users.html" page, when I click on the href, the URL on browser changes, but it doesn't load the template for User Detail, also the console doesn't have any errors.
Here is my ng-repeat code:
<div class="lista-dicas" ng-repeat="user in users | orderBy:'-ID'">
<div class="col-md-12 box-noticia">
<h3 class="titulo"><a ui-sref="app.users.id({id: user.ID})">{{ user.ID }}</a></h3>
<p class="subtitulo">{{ user.Name }}</p>
<p class="tags">{{ user.Tags }}</p>
<hr>
</div>
</div>
My router configs
angular.module('myapp_dicas').config(routeConfig);
function routeConfig($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app.users', {
url: '/users',
templateUrl: '/www/app/users/users.html',
controller: 'UsersController'
})
.state('app.users.id', {
url: '/:id',
templateUrl: 'www/app/users/user-detail.html',
controller: 'UserDetailController'
});
Try to change
url: '/:id',
To
url: '/users/details/:id',
Ok, cause it didn't work, do you have app state? If not, try to change state names to, for example, users and details (just like this, no dots). Cause now, it looks like id state is child of users and it may cause a problem. And URL for details: url: '/users/details/:id', cause it looks natural.
I generated a project using JHipster And i want to make a few modifications to it. I want the first page to be the login page, a simple one without a header, menu or footer. I saw that in the generated code the components are added from index.
<page-ribbon></page-ribbon>
<div ui-view="navbar" ng-cloak></div>
<div class="container">
<div class="well" ui-view="content">
<!-- Angular views -->
</div>
<div class="footer" ng-cloak>
<p data-translate="footer">This is your footer</p>
</div>
</div>
I don't know what is the best way to modify this to show the login page at first is user isn't logged in. If the user is logged in I want to show the home page of the application
Thanks.
the quickest fix available to solve your problem, is just to open "src/main/webapp/app/home/home.state.js" and add the ROLE_USER authority to data.authorities, like
$stateProvider.state('home', {
parent: 'app',
url: '/',
data: {
authorities: ['ROLE_USER']
},
views: {
'content#': {
templateUrl: 'app/home/home.html',
controller: 'HomeController',
controllerAs: 'vm'
}
},
...
This will automatically route yourself to "accessdenied", but automatically opens the login dialog
a better solution would be to add a login ui to the homeview, if not authenticated, or just to upgrade the login components to a own route.
<html>
<head>
[...]
</head>
<body>
<div ui-view="body">
<header></header>
<div ui-view="main">
Something you see while angular/templates load.
</div>
<footer></footer>
</div>
</body>
</html>
stuff.js
var app = angular.module("app", ['ui.router']);
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('home', {
url: '/',
views: {
"main": {
controller: 'HomeController',
templateUrl: 'home.tpl.html'
}
}
});
$stateProvider.state('signin', {
url: '/signin',
views: {
"body": {
controller: 'SigninController',
templateUrl: 'signin.tpl.html'
}
}
});
}]);
I disabled javascript while making the state transition and this is what I see in the browsers inspector...
<html>
[...]
<body>
<div ui-view="body">
<header>[...]</header>
<div ui-view="main">[... home.tpl.html ...]</div>
</div>
<div ui-view="body">
[... signup.tpl.html ...]
</div>
</body>
</html>
I was shocked to see that ui-router actually duplicates the ui-view and creates one view before removing the old view.
Obviously this causes the problem that a combination of BOTH views are showing for at least two seconds while navigating from signin to home. This behavior is the same on all tested browsers. Is there a way to tell/force/trick ui-router into completely removing the template of one view before loading another view?
this is similar to: Preventing duplicate ui-view in AngularJS and the answer may apply to my situation as well.
EDIT
the first div had class="ng-enter ng-enter-active" and the next one had class="ng-leave ng-leave-active" answer follows from that.
I have noticed this as well. This answer: Angularjs - ng-cloak/ng-show elements blink states that ng-cloak is the ticket, but I haven't been able to get it to work in this scenario.
I'm not sure how you are moving between your routes, but you could set a property on the model used by the first view to true and use ng-show on the entire view with that variable. Then when you're ready to move to the second view, set that variable to false. I'm trying to resolve this myself and will report back if I find a more elegant solution.
I am using ui-sref for routing depending upon state.
Currently I am getting child's view inside parent as hierarchy. I want to assign a child's view to a parent view. Current state is as below plunker.
[link][//plnkr.co/edit/fpsTWglicbcGMotJIlll]
I want to see welcome after clicking click me.
If I understood your question correctly, the problem is you have inner as a child of tab1... so it is displayed in the ui-view of tab1. If you want it instead to make it replace tab1, then you don't need the ui-view in tab1.
Here's a forked plunker showing what I mean.
http://plnkr.co/edit/t4cxejVLGf4kywKp2bb5?p=preview
The parts I changed:
.state("main", { abtract: true, url:"/main", templateUrl:"main.html" })
.state("main.tab1", { url: "/tab1", templateUrl: "tab1.html" })
.state("main.inner",{
url:"/inner",
templateUrl:"inner.html"
})
.state("main.tab2", { url: "/tab2", templateUrl: "tab2.html" })
And in tab1.html
<div>
This is the view for tab1
<a ui-sref="main.inner">click me</a>
</div>
Is this what you're shooting for?
Add $scope.$state = $state;in the controller.
Then add ng-hide="$state.current.name === 'main.tab1.inner'" to
<h2 ng-hide="$state.current.name === 'main.tab1.inner'">View:</h2>
and
<div ng-hide="$state.current.name === 'main.tab1.inner'">
This is the view for tab1
<a ui-sref="main.tab1.inner">click me</a>
</div>
Here's the link [link] http://plnkr.co/edit/Yvlp6RNF69yiSq1HfMcf?p=preview
I am building a ionic pacakage, having multiple views. I use the route provider to navigate between different views.
app.js
.config(function($routeProvider,$locationProvider){
$routeProvider
.when('/search',
{
controller : 'MyController',
templateUrl : 'partials/search.html'
})
.when('/not-found/:className',
{
controller : 'MyController',
templateUrl : 'partials/not-found.html'
})
My index.html
<body ng-app="MyApp">
<ng-view></ng-view>
</body>
</html>
The problem is that the back button on my phone does not work.i.e it does not remember the history.
e.g If I go from search.html to not-found.html, when I press the back button on my phone, I expect it to come back to search.html instead it closes my app.
I looked and ionic forum and the suggest way to make back button work is to use ion-nav-view. If I replace ng-view with ion-nav-view, the search/not-found page are not rendering, I even tried adding the ion-view on the search/not-found html page.
1) Could you please suggest a way to get my back button working?
In order to achieve that, you actually need to capture the hardware back button pressed event and perform the navigation accordingly or You can use ion-nav-back-button..
Capture the hardware back button event :
$ionicPlatform.registerBackButtonAction(function () {
if (condition) {
navigator.app.exitApp();
} else {
// handle back action!
}
}, 100);
More Details can be found here
Using ion-nav-back-button
<ion-nav-bar>
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
More Details about this can be found here
registerBackButtonAction is already handled as part of ion-nav-back-button as part of the ng-click attribute within the ion-nav-back-button definition: buttonEle.setAttribute('ng-click', '$ionicGoBack()') , since $ionicGoBack executes $ionicHistory.goBack() which in turn handles the hardware back button. A simple change to use state configuration should work fine as below:
angular
.module('app', ['ionic'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('search', {
url: '/search',
controller : 'MyController',
templateUrl : 'partials/search.html'
})
.state('not-found', {
url: `/not-found/:className',
controller : 'MyController',
templateUrl : 'partials/not-found.html'
});
$urlRouterProvider.otherwise('/search');
});
HTML:
<body ng-app="app">
<ion-nav-bar>
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>