AngularJS UI-Router 中 ui-sref 和 $state.go 的区别

Posted 2023-02-19

【中文标题】AngularJS UI-Router 中 ui-sref 和 $state.go 的区别

【英文标题】：Difference between ui-sref and $state.go in AngularJS UI-Router

【发布时间】：2014-08-22 23:44:53

【问题描述】：

ui-sref 和 $state.go() 在功能上有什么区别吗？

ui-sref 用于<a>...</a>，$state.go('someState') 用于控制器。

在 html 中，我会使用：

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

而在函数中我会使用类似的东西：

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

那么，是不是需要在$state.go() 之后添加一些内容？假设当前状态为currentState。

【参考方案1】：

是的，有区别。正如您在问题中看到的那样：

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

$state.go 默认添加一个后退按钮。使其行为完全相同的解决方案是调用：

$ionicHistory.nextViewOptions(disableBack: true);

在调用 $state.go 之前。

【参考方案2】：

ui-sref 和 $state.go 之间没有功能区别。查看文档

Activating a state

激活状态主要有三种方式：

致电$state.go()。高级便捷方法。 单击包含ui-sref 指令的链接。 导航到与状态关联的url。

所以，这些最终都在做同样的事情，正如我们在 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);
      );

它确实调用了 $state.go()

也如这里所讨论的：ui-sref:

ui-sref='stateName' - 导航到状态，没有参数。 “stateName”可以是任何有效的绝对或相对状态，遵循与$state.go()相同的语法规则

【讨论】：

据我了解，有一个区别：导航到url 将调用$urlRouterProvider 匹配器，而其他两种方法不会。

在锚标签中使用 ui-sref 指令将导致浏览器在状态栏中显示目标 url，因此最好只在控制器中处理 ng-click 事件，因为有更多用户反馈。