javascript - 如何将 Angular 的 ui-sref 插入链接文本中？

Question

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

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

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

但是，我想将 XXX 替换为 <a> 中的实际 URL。标签。 我怎么做？只需将 XXX 替换为整个 ui-sref表达式不起作用。

Answer 1

如果您使用的是路由器版本 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 (默认 true) 如果为 true，并且没有与第一个参数中提供的状态关联的 url，则将从第一个可导航祖先(也称为具有有效 url 的祖先)构建构造的 href url )。

2) 继承 bool 值(默认 false)如果为 true 将从当前 url 继承 url 参数。

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

4) 绝对 bool 值 (默认 false) 如果为 true 将生成绝对 url，例如“http://www.example.com/fullurl”。

除非将 View 关联到范围或 Controller 实例(如果您使用 Controller As)，否则您将无法访问 View 中注入(inject)的 $state。因此，您可以在 Controller 上添加作用域方法。

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

在你看来:-

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

并通过调用getUrl函数在 View 上访问它。如果您希望跨 Controller 使用此功能，您可以将其移动到 utilityService 函数，或者将实用程序方法放置在 run block 中的 rootScope 上，以便任何子作用域都可以访问它(尽管对于单元测试，您可能需要基于模拟它)在您的设置上)。

记住注入(inject)$state。