5

基本上，我正在尝试更改/自定义 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' 值。
我的尝试是通过手风琴组指令的链接函数中的“元素”参数设置 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>

我错过了什么？
我很感激你的时间，
杰瑞德

4

2 回答 2

12

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

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

（对于您的应用程序中的状态，在其对应的 URL 中site.home.news带有一个参数，并考虑指向 current 中的新闻 ID ）newsIDnews.id$scope

请参阅此处的文档。

于 2014-05-08T05:45:48.950 回答
6

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

于 2013-09-06T15:06:54.170 回答