Question

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

我缺少什么？
我很感激你的时间，
贾里德

Answer 1

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

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

（对于您的应用中的site.home.news州，其相应网址中包含newsID参数，并考虑news.id指向当前$scope中的新闻ID

请参阅文档here。

Answer 2

好的，我已经解决了我的问题。似乎我把国家与网址混为一谈与ui-sref的链接将触发状态更改为给定状态，并且如果在状态中定义了url，则可以选择更改/生成url。状态本身也没有参数，但网址也有这是我对一个州的理解：
ui-router中的状态是指在给定html模板中定义的网站状态。此模板可以定义ui-views，即将由其他状态填充的占位符（可以命名）。任何州都可以使用相应的html模板将其他州模板内的一个或多个ui视图作为目标 - 即他们可以将这些模板的内容放入其他州模板的ui视图中。每个州都可以有一个关联的URL，它将浏览器中的URL与状态链接起来。如果浏览器中的url与给定状态关联的url匹配，则网站的状态将发生变化，即新状态将填充其他状态模板中引用的ui-views，模板内容绑定到当前活动状态的视图。
网址遵循状态的层次结构，但是与它们无关，因此状态“site.home”可以具有“/ home / content”的网址，该网址将附加到与其父状态关联的网址（'网站'），除非明确告知不要。
因此，状态改变/转换可以通过ui-sref或通过href链接改变url或由用户在浏览器中手动触发。
另一种在内部触发状态变化的方法（对于egz。在控制器中也可以为每个状态定义）是使用$ state.go（...）方法。
理解这一点，我只是改变了对href urls的ui-sref引用。虽然这不是我问题的直接解决方案，但我仍然不明白为什么ui-router没有生成相应的href，它确实使事情按预期工作。我仍然在探索使用$ state.go（）来实现我的目标。

在指令的模板中，如何使角度ui-router ui-sref工作？

2 个答案: