基本上,我正在尝试更改/自定义 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