Angular ui-router 中 $state.trantionTo()和 $state.go()的区别

在 AngularJS 中,我看到有时我们使用 $state.transitionTo(),有时我们使用 $state.go()。有人能告诉我它们有什么不同吗? 什么时候应该用一个来代替另一个?

82036 次浏览

Are you referring to the AngularUI Router? If so, the wiki specifies the differences:

$state.go(to [, toParams] [, options])

Returns a Promise representing the state of the transition.

Convenience method for transitioning to a new state. $state.go calls $state.transitionTo internally but automatically sets options to { location: true, inherit: true, relative: $state.$current, notify: true }. This allows you to easily use an absolute or relative to path and specify only the parameters you'd like to update (while letting unspecified parameters inherit from the current state).


$state.transitionTo(to, toParams [, options])

Returns a Promise representing the state of the transition.

Low-level method for transitioning to a new state. $state.go() uses transitionTo internally. $state.go() is recommended in most situations.

$state.transitionTo transite to a new state. In most cases, you don't have to use it, you may prefer $state.go.

It takes some parameters in an options object:

  • location: If true will update the url in the location bar, if false will not. If string "replace", will update url and also replace last history record.
  • inherit: If true will inherit url parameters from current url.
  • relative (stateObject, default null): When transitioning with relative path (e.g '^'), defines which state to be relative from.
  • notify: If true, will broadcast $stateChangeStart and $stateChangeSuccess events.
  • reload: If true will force transition even if the state or params have not changed, aka a reload of the same state.

$state.go is a sort of shortcut that call $state.transitionTo with default options:

  • location: true
  • inherit: true
  • relative: $state.$current
  • notify: true
  • reload: false

It is more convenient as the synthax is simpler. You can call it only with a state name.

$state.go('home');