如何将 angular 的 ui-sref 插入到链接的文本中？

Question

我有一个使用 AngularJS 的应用程序。在我的观点中，我有一些看起来像这样的东西：

<span>My URL: <a ui-sref="mystate({ arg1_name: 'arg1_val', arg2_name: 'arg2_val'})">XXX</a></span>

这完全符合我的预期。没问题。

但是，我想用 <a> 中的实际 URL 替换 XXX标签。我怎么做？简单地用整个 ui-sref 表达式替换 XXX 是行不通的。

Answer 1

您可以使用$state.href()方法。 ui-sref 指令在内部使用此更新 href。

PSL 的回答有两个正确的方法。

如果使用

{{$state.href('mystate', { arg1_name: 'arg1_val', arg2_name: 'arg2_val'})}}

$state 使用 $scope.$state = $state

注入作用域

Answer 2

如果您使用的是路由器版本 0.2.0，则有一种从状态配置中获取 url 的新方法。您可以为此使用 $state.href(stateOrName [, params] [, options])。如果您将 $state 个实例放在作用域上，您可以：

<span><a 
   ui-sref="mystate({ arg1_name: 'arg1_val', arg2_name: 'arg2_val'})">
   {{$state.href('mystate', { arg1_name: 'arg1_val', arg2_name: 'arg2_val'})}}
</a></span>

选项可以是：-

1) lossy Boolean (default true) 如果为真，并且如果没有 url 与第一个参数中提供的状态相关联，那么构造的 href url 将从第一个可导航祖先（也就是具有有效 url 的祖先）。

2) inherit Boolean (default false) 如果为 true 将从当前 url.

继承 url 参数

3) relative stateObject (default $state.$current), 当使用相对路径转换时（例如'^'），定义相对于哪个状态。

4) absolute 布尔值（默认为 false）如果为 true 将生成一个绝对 url，例如“http://www.example.com/fullurl”。

您将无法在您的视图中访问注入的 $state，除非您将其关联到作用域或控制器实例（如果您使用控制器 As）。所以你可以在你的控制器上添加一个范围方法。

 $scope.getUrl = function(state, params){
     return $state.href(state, params, anyOptions);
 }

在您看来：-

{{getUrl('mystate', { arg1_name: 'arg1_val', arg2_name: 'arg2_val'})}}

并通过调用 getUrl 函数在视图上访问它。如果你想跨控制器使用这个功能，你可以将它移动到一个 utilityService 函数，或者将实用程序方法放在运行块中的 rootScope 上，这样任何子范围都可以访问它（尽管对于单元测试你可能需要根据您的设置模拟它）。

记得注入$state.

如何将 angular 的 ui-sref 插入到链接的文本中？

How to insert angular's ui-sref into the text of a link?

html

javascript

angularjs

angular-ui-router