在指令的模板中，如何让角度ui-router的ui-sref工作？ [英] How to get angular ui-router's ui-sref to work, when inside a directive's template?

问题描述

基本上，我正在尝试更改/自定义ui.bootstrap.accordion的行为。一切正常，除了与ui-router的集成。

以下是我想要使用手风琴的方式：

Basically, I am trying to change/customize the behaviour of the ui.bootstrap.accordion. All is working, except for integration with ui-router.
Here's the way I want to use the accordion:

  <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>

以下是手风琴的修改模板：

Below's the modified template of the 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属性的值，如下所示：

Basically the 'site.home.newsID_X' need to replace the 'site' value of ui-sref within the template.
My attempt was to set the value of ui-sref attribute via the 'element' parameter from the accordionGroup directive's linking function as shown below:

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

这会更新目标ui -sref，但是ui-router没有从引用状态的url生成相应的href，所以在呈现DOM后我得到了

This does update the target ui-sref, but ui-router does not generate the corresponding href from the referenced state's url, so after the DOM is rendered I am getting

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

而不是预期的

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

我缺少什么？

我很感激你的时间，

Jared

What am I missing?
I appreciate your time,
Jared

推荐答案

好的，我已经解决了我的问题。似乎我用状态混淆了状态。

与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（...）方法。

理解，我只是将ui-sref引用更改为href urls。虽然这不是我问题的直接解决方案，但我仍然不明白为什么ui-router没有生成相应的href，它确实使事情按预期工作。我仍然要探索使用$ state.go（）来实现我的目标。

Ok, I've solved my problem. It appears that I was confusing states with urls.
A link with ui-sref will trigger state change to a given state, and will optionally change/generate the url, if one is defined in the state. Also states themselves do not have parameters, but urls do.
Here's my understanding of a state:
A state in ui-router refers to a state of the website defined in a given html template. This template can have defined ui-views, i.e. place-holders (that can be named) that will be populated by other states. Any state can target one or more ui-views inside other states' template with respective html templates - i.e. they can put the content of those templates into ui-views of other states' templates. Every state can have an associated url, which links the url in the browser with the state. If the url in the browser matches the url associated with a given state, the state of the website will change, i.e. the new state will populate referenced ui-views in other state's templates, with contents of templates bound to views in the currently active state.
Urls follow hierarchy of states, but are independent of them, so a state 'site.home' can have a url of '/home/content', which will be appended to a url associated with its parent state ('site'), unless explicitly told not to.
Therefore a state change/transition can be triggered either by the ui-sref or by changing the url via href link or manually in the browser by the user.
Another way to trigger state change internally (for egz. in a controller which can also be defined for every state) is to use the $state.go(...) method.
Understanding that, I simply changed the ui-sref references to href urls. While this is not a direct solution to my problem, and I still do not understand why ui-router isn't generating corresponding hrefs, it does make things work as expected. I am still to explore the use of $state.go() to accomplish my goal.

这篇关于在指令的模板中，如何让角度ui-router的ui-sref工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！