AngularJS - Navigate to another view via $state.go

Question

I am using the Ionic Framework to create a single page app for mobile. I have a tab based structure for the profile page. Inside the "Home" view, I have a link "Edit Profile" once clicked it should navigate to editprofile.html via ProfileManagementController.js. When I click it, nothing happens and no errors show in the console either. Only the url in the address bar gets updated.

Here is the route code in app.js:

.state('editProfile', {
    url: '/editProfile',
    views: {
      'tab-editprofile': {
        templateUrl: 'templates/profile/editprofile.html',
        controller: 'ProfileManagementController'
      }
    }
  })

Here it the ProfileManagementController.js snipper relevant to this feature:

$scope.goToEditProfile = function(path)
{
    $state.go(path);
}

This is the HTMl form for the Home tab view (tab-home.html) in which the button exist to navigate to edit profile :

<div>
          Name: {{tempUserObject.name}} <br/>
          Friends: {{tempUserObject.totalFriends}}<br/>
          Mobile: {{tempUserObject.mobile}}<br/>
          Username: {{tempUserObject.username}} <br/>  
          <br/>
            <button ng-click="goToEditProfile('editProfile')" class="button">Edit Profile</button>

        </div>

This is the URL originally when i first land on tab-home.html and after clicking the button that doesn't work:

Before: http://127.0.0.1:49259/index.html#/tab/home After: http://127.0.0.1:49259/index.html#/editProfile

Please help guide me to figure out what is going wrong with this link. I've used $state.go before in other places and it works well.

Update: editprofile.html added.

<ion-view hide-nav-bar="false" title="Edit Profile">
    <ion-content padding="'true'" class="has-header">
        <div class="spacer" style="width: 300px; height: 87px;"></div>
        <div class="button-bar"></div>
        <h2>Edit Profile</h2>
    </ion-content>
</ion-view>

Does changing it to a relative path work? i.e. `ng-click="goToEditProfile('^.editProfile')"` — potatopeelings, Nov 28 '15 at 09:14

score 1 · Answer 1 · answered Nov 28 '15 at 09:24

1

use this instead of state change.

 $location.path('/editProfile');

Dont forget to inject $location in your controller function.

answered Nov 28 '15 at 09:24

Robus

465
6
19

Yup did that now and injected location but didn't work. Only URL changed to as mentioned earlier. $state is not the problem so $location is not the solution. Other functions in same app.js worked with state – ksa_coder Nov 28 '15 at 09:27
do you use ui-router !! if yes then try `ui-sref ="editProfile"` also go through this http://stackoverflow.com/questions/21023763/angularjs-difference-between-angular-route-and-angular-ui-router – Robus Nov 28 '15 at 09:37
no I don't. Only using what comes with foundation AngularJS and Ionic Framework – ksa_coder Nov 28 '15 at 09:39
It seems that ngRoute has hard dependency on Ionic framework, I don’t find anything wrong in your code, it may depend on versions of angular, or ionic framework too, might not work consistently in iterative versions. Matter of fact ngRoute is not a core package any more. esp., you using ionic they recommend ui-router. checkout their blog. http://ionicframework.com/docs/angularjs/controllers/view-state/ – Robus Nov 28 '15 at 10:07
also go through this for resolving issue https://forum.ionicframework.com/t/using-state-go-to-navigate-between-views-doesnt-work-location-path-does/1846/13 – Robus Nov 28 '15 at 10:13
Got it working.. made couple of changes so not sure which made it work. Will update as answer once I find the specifics – ksa_coder Nov 28 '15 at 10:20
Great, do update the working code, so I can wrap my head around. :) – Robus Nov 28 '15 at 10:21
Ionic has ui-router default. Look http://ionicframework.com/docs/api/directive/ionNavView. Default router very uncomfortable!!! – Bakhtier Gaibulloev Nov 28 '15 at 12:02

score 0 · Answer 2 · answered Nov 28 '15 at 20:50

0

Do you have a state named 'path' defined in your app.js? If not create a state named 'path' with template and controller just like the 'editprofile' state

answered Nov 28 '15 at 20:50

Ali Sadiq

900
6
11

score 0 · Answer 3 · answered Dec 02 '15 at 14:20

0

So I fixed the above issues with modifying the route in app.js to the following:

 .state('editprofile', {
    url: '/editprofile',
    templateUrl: 'templates/profile/editprofile.html',
    controller: 'ProfileManagementController'
  })

answered Dec 02 '15 at 14:20

ksa_coder

1,393
3
15
38

AngularJS - Navigate to another view via $state.go

3 Answers3