47

Is there any functional difference between ui-sref and $state.go()?

ui-sref is used in <a>...</a> and $state.go('someState') is used in a controller.

In HTML, I would use:

<a ui-sref="currentState.state1">Link</a>

whereas in a function I would use something like:

if(someCondition) {
    $state.go('currentState.state1');
}

So, is that it or do I need to add something after $state.go()? Assuming current state is currentState.

cespon
  • 5,630
  • 7
  • 33
  • 47
Aniket Sinha
  • 6,001
  • 6
  • 37
  • 50

2 Answers2

51

There is no functional difference between ui-sref and $state.go. See the doc

Activating a state

There are three main ways to activate a state:

  • Call $state.go(). High-level convenience method.
  • Click a link containing the ui-sref directive.
  • Navigate to the url associated with the state.

So, these are at the end doing the same, and as we can see in the code of the ui-sref directive:

...
element.bind("click", function(e) {
    var button = e.which || e.button;
    if ( !(button > 1 || e.ctrlKey || e.metaKey || e.shiftKey || element.attr('target')) ) {

      var transition = $timeout(function() {
        // HERE we call $state.go inside of ui-sref
        $state.go(ref.state, params, options);
      });

it does call $state.go()

And also as discussed here: ui-sref:

ui-sref='stateName' - Navigate to state, no params. 'stateName' can be any valid absolute or relative state, following the same syntax rules as $state.go()

Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
  • 2
    As far as I understand, there is a difference: navigation to the `url` will call the `$urlRouterProvider` matchers, while the two other methods won't. – rcomblen Feb 02 '15 at 10:31
  • 1
    Using the ui-sref directive inside an anchor tag will cause the browser to display the target url in the status bar so it's preferable to just handling an ng-click event in the controller because there is more user feedback. – Eric Rini Jun 08 '17 at 17:17
8

Yes, there is a difference. As you can see in the question:

Ionic framework $state.go('app.home'); is adding back button on page where i want to go (how to remove it)?

the $state.go by default adds a back button. The solution to make it behave exactly the same way is to call:

$ionicHistory.nextViewOptions({disableBack: true});

before calling $state.go.

Community
  • 1
  • 1
Gerard Carbó
  • 1,775
  • 18
  • 16