在指令模板内如何让 Angular ui-router ui-sref 工作?

2024-01-24

基本上,我正在尝试更改/自定义 ui.bootstrap.accordion 的行为。除了与 ui-router 的集成之外,一切正常。
这是我想要使用手风琴的方式:

  <accordion> <!-- this element is actually separate view in a parent state of the accordion-group's below.-->
    <accordion-group  ui-sref="site.home.newsID_1"> <!-- accordion-groups will be generated with ng-repeat.-->
      <accordion-heading>
        News 1
      </accordion-heading>
      <p>This is</p>
    </accordion-group>
    <accordion-group  ui-sref="site.home.newsID_2">
      <accordion-heading>
        News 2
      </accordion-heading>
      <p>Home News's</p>
    </accordion-group>
    <accordion-group ui-sref="site.home.news.newsID_3">
      <accordion-heading>
        News 3
      </accordion-heading>
      <p>Preview and navigation</p>
    </accordion-group>
  </accordion>

下面是修改后的手风琴模板:

<div ng-mouseenter="isOpen = !isOpen" ng-mouseleave="isOpen = !isOpen">
  <div class="accordion-group" ng-class="{transparentBackground: isClicked}">

      <div class="accordion-heading">
        <a id="link" ui-sref="site" class="accordion-toggle" ng-click="isClicked = !isClicked" accordion-transclude="heading">
          {{heading}}
        </a>
      </div>

    <div class="accordion-body" collapse="!isOpen && !isClicked">
      <div class="accordion-inner" ng-transclude></div>  </div>
  </div>
</div>

基本上,“site.home.newsID_X”需要替换模板中 ui-sref 的“site”值。
我的尝试是通过 AccordionGroup 指令的链接函数中的 'element' 参数设置 ui-sref 属性的值,如下所示:

link: function(scope, element, attrs, accordionCtrl) {
  element.find('#link').attr("ui-sref", attrs.uiSref)
  [...]
}

这确实更新了目标 ui-sref,但 ui-router 不会从引用状态的 url 生成相应的 href,因此在渲染 DOM 后,我得到

 <a ui-sref="site.home.newsID_1" href="#/site"></a>

而不是预期的

 <a ui-sref="site.home.newsID_1" href="#/site/home/newsID_1"></a>

我缺少什么?
我很感激你的时间,
Jared


我不确定它是否是新的,但是使用 ui-sref 时有一种传递参数的方法。 在你的情况下,它会是这样的:

ui-sref="site.home.news({ newsID: news.id })"

(for a site.home.news在你的应用程序中声明,带有newsID其对应的 URL 中的参数,并考虑news.id指向当前新闻ID$scope)

查看文档here http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在指令模板内如何让 Angular ui-router ui-sref 工作? 的相关文章

随机推荐