angularjs $state.go not redirecting

Question

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.

Answer 1

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.