当在指令的模板中时，如何让 angular 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 的集成.
这是我想使用手风琴的方式:

 <手风琴><!-- 这个元素实际上是手风琴组下面的父状态中的单独视图.--><accordion-group ui-sref="site.home.newsID_1"><!-- 将使用 ng-repeat 生成手风琴组.--><手风琴标题>新闻 1</accordion-heading><p>这是</p></accordion-group><accordion-group ui-sref="site.home.newsID_2"><手风琴标题>新闻2</accordion-heading><p>家庭新闻</p></accordion-group><accordion-group ui-sref="site.home.news.newsID_3"><手风琴标题>新闻 3</accordion-heading><p>预览和导航</p></accordion-group></手风琴>

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

<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">{{标题}}</a>
<div class="accordion-body" collapse="!isOpen && !isClicked"><div class="accordion-inner" ng-transclude></div>

基本上'site.home.newsID_X'需要替换模板中ui-sref的'site'值.
我的尝试是通过手风琴组指令的链接函数中的元素"参数设置 ui-sref 属性的值，如下所示:

link: 函数(作用域、元素、属性、手风琴控件){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>

我错过了什么?
我很感激你的时间，
贾里德

解决方案

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

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>

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)
  [...]
}

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>

instead of the expected

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

What am I missing?
I appreciate your time,
Jared

解决方案

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.

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