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
– potatopeelings, Commented Nov 28, 2015 at 9:14

Robus · Accepted Answer · 2015-11-28 09:24:32Z

1

use this instead of state change.

 $location.path('/editProfile');

Dont forget to inject $location in your controller function.

answered Nov 28, 2015 at 9:24

Robus

4656 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

ksa_coder Over a year ago

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

Robus Over a year ago

do you use ui-router !! if yes then try ui-sref ="editProfile" also go through this stackoverflow.com/questions/21023763/…

ksa_coder Over a year ago

no I don't. Only using what comes with foundation AngularJS and Ionic Framework

Robus Over a year ago

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. ionicframework.com/docs/angularjs/controllers/view-state

Robus Over a year ago

also go through this for resolving issue forum.ionicframework.com/t/…

|

Ali Sadiq · Accepted Answer · 2015-11-28 20:50:05Z

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, 2015 at 20:50

Ali Sadiq

9006 silver badges11 bronze badges

Comments

ksa_coder · Accepted Answer · 2015-12-02 14:20:23Z

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 2, 2015 at 14:20

ksa_coder

1,4133 gold badges16 silver badges38 bronze badges

Collectives™ on Stack Overflow

AngularJS - Navigate to another view via $state.go

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related