Jak uzyskać ui-sref kątowego interfejsu użytkownika do pracy, gdy znajduje się on wewnątrz szablonu dyrektywy?

Question

Zasadniczo próbuję zmienić/dostosować zachowanie pliku ui.bootstrap.accordion. Wszystko działa, z wyjątkiem integracji z ui-routerem.
Oto sposób chcę użyć akordeonu:

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

Poniżej jest zmodyfikowany szablon akordeonu:

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

Zasadniczo potrzeba „site.home.newsID_X” zastąpić „miejsce” wartość ui-sref w szablonie.
Moja próba była ustawiona na wartość atrybutu UI-sref poprzez parametr „elementu” z funkcji łączącej dyrektywy accordionGroup, jak przedstawiono poniżej:

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

to robi zaktualizować docelową UI-sref, ale ui- Router nie generuje odpowiedni href od odwołuje państwa URL, więc po DOM staje Dostaję

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

zamiast oczekiwanego

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

Czego mi brakuje?
cenię swój czas,
Jared

Answer 1

Ok, mam rozwiązać mój problem. Wygląda na to, że mylę stany z adresami URL.
Łącze z ui-sref wywoła zmianę stanu do danego stanu i opcjonalnie zmieni/wygeneruje adres URL, jeśli jest zdefiniowany w stanie. Również same stany nie mają parametrów, ale adresy URL.
Oto moje zrozumienie stanu:
Stan w ui-routerze odnosi się do stanu witryny zdefiniowanej w danym szablonie HTML. Ten szablon może mieć zdefiniowane widoki ui, tj. Place-holder (które można nazwać), które będą zapełniane przez inne stany. Każdy stan może kierować jeden lub więcej widoków interfejsu użytkownika w szablonie innych stanów za pomocą odpowiednich szablonów html - tzn. Mogą umieścić treść tych szablonów w widokach ui szablonów innych stanów. Każdy stan może mieć powiązany adres URL, który łączy URL w przeglądarce ze stanem. Jeśli URL w przeglądarce odpowiada adresowi URL powiązanemu z danym stanem, stan strony internetowej ulegnie zmianie, tzn. Nowy stan zapełni referencje ui w szablonach innych stanów, z zawartością szablonów powiązanych z widokami w aktualnie aktywnym stanie .
Adresy URL podążają za hierarchią stanów, ale są od nich niezależne, więc stan "site.home" może zawierać URL "/ home/content", który zostanie dołączony do adresu URL związanego z jego stanem macierzystym ("site") , chyba że wyraźnie odmówiono.
Dlatego zmiana stanu/przejście może być wyzwalane przez ui-sref lub przez zmianę adresu URL poprzez link href lub ręcznie w przeglądarce przez użytkownika.
Innym sposobem wyzwalania zmiany stanu wewnętrznie (np. W kontrolerze, który można również zdefiniować dla każdego stanu), jest użycie metody $ state.go (...).
Zrozumienie tego, po prostu zmieniłem odniesienia do ui-sref do adresów URL href. Chociaż nie jest to bezpośrednie rozwiązanie mojego problemu, a wciąż nie rozumiem, dlaczego ui-router nie generuje odpowiednich hrefów, sprawia, że ​​wszystko działa zgodnie z oczekiwaniami. Nadal jestem do zbadania wykorzystania $ state.go(), aby osiągnąć mój cel.

Answer 2

Nie jestem pewien, czy jest nowy, czy nie, ale istnieje sposób na przekazywanie parametrów podczas korzystania z interfejsu ui-sref. W twoim przypadku będzie to coś takiego:

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

(dla site.home.news stanu w was aplikacja, za pomocą parametru w odpowiadającym jej URL newsID, a biorąc pod uwagę news.id punktów do identyfikatora wiadomości w bieżącym $scope)

Zobacz dokumentację here.