CODEWITHSUNDEEP
javascriptangularjsionic-frameworkangular-ui-routerui-sref
Saras Arya
Saras Arya

Reputation: 3112

Ui-sref doesn't work when I click on them

I have a html file

<div class="list">

  <a  ui-sref="sideMenu.settings.profileSettings" class="item item-icon-left">
    <i class="icon ion-email"></i></a>
    User Profile
  </a>
   <a ui-sref="sideMenu.settings.profileSettings" class="item item-icon-left">
    <i class="icon ion-email"></i>
    Vehicle
  </a>
</div>

and a js file

.state('sideMenu.settings.profileSettings', {
        url: "/profileSettings",
        templateUrl: "templates/Settings/profileSettings.html",
        controller: 'profileSettingsController'

    })

Now whenever I click on the state. It updates the url. It means it's executing but it doesn't update the view. I have beem scratching my head but can't seem to figure out what the problem is.

Upvotes: 0

Views: 1512

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123861

There is a working plunker. Not fully sure what is not working, because there are now really many resources and Q & A here revealing the mystery of the UI-Router... but ok

I used your states like this:

  .state('sideMenu', {
      url: "",
      template: '<div ui-view></div>',
  })
  .state('sideMenu.settings', {
      url: "",
      template: '<div ui-view></div>',
  })
  .state('sideMenu.settings.profileSettings', {
    url: "/profileSettings",
    templateUrl: "templates/Settings/profileSettings.html",
    controller: 'profileSettingsController'
  })
  .state('sideMenu.settings.vehicle', {
    url: "/vehicle",
    templateUrl: "tpl.html",
  })

As we can see, I just showed the parents and added one another state vehicle.

And with the index.html like that:

<div class="list">

  <a  ui-sref="sideMenu.settings.profileSettings" class="item item-icon-left">
    <i class="icon ion-email"></i>
    User Profile
  </a><br />
   <a ui-sref="sideMenu.settings.vehicle" class="item item-icon-left">
    <i class="icon ion-email"></i>
    Vehicle
  </a>

</div>

plus the target somewhere 

<div ui-view=""></div> // here will be the parent state injected

It is working. Check it here

Upvotes: 1

Related Questions