Come far funzionare ui-sref di ui-router angolare quando si trova all'interno di un modello di direttiva?

Question

Fondamentalmente, sto cercando di modificare/personalizzare il comportamento di ui.bootstrap.accordion. Tutto funziona, tranne per l'integrazione con ui-router.
Ecco il modo in cui voglio usare la fisarmonica:

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

Sotto sta il modello modificato della fisarmonica:

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

Fondamentalmente la necessita 'site.home.newsID_X' di sostituire il 'sito' valore di ui-sref all'interno del modello.
Il mio tentativo è stato quello di impostare il valore dell'attributo ui-sref tramite il parametro 'elemento' dalla funzione di collegamento della direttiva accordionGroup come illustrato di seguito:

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

Questo fa aggiornare la destinazione ui-sref, ma UI- router non genera il corrispondente dal href URL dello stato di riferimento, in modo da dopo che il DOM è reso sto ottenendo

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

invece dei previsti

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

Cosa mi manca?
Apprezzo il vostro tempo,
Jared

Answer 1

Ok, ho risolto il mio problema. Sembra che stavo confondendo gli stati con gli URL.
Un collegamento con ui-sref attiverà il cambiamento di stato in un dato stato e cambierà/genererà facoltativamente l'url, se uno è definito nello stato. Inoltre gli stati stessi non hanno parametri, ma gli URL lo fanno.
Ecco la mia comprensione di uno stato:
Uno stato in ui-router fa riferimento a uno stato del sito Web definito in un modello HTML specificato. Questo modello può aver definito le viste ui, cioè i segnaposto (che possono essere nominati) che verranno popolati da altri stati. Qualsiasi stato può scegliere come target una o più visualizzazioni di ui all'interno del modello di altri stati con i relativi modelli html, ovvero possono inserire il contenuto di tali modelli in visualizzazioni ui dei modelli di altri stati. Ogni stato può avere un URL associato, che collega l'URL nel browser con lo stato. Se l'url nel browser corrisponde all'url associato a un determinato stato, lo stato del sito Web cambierà, ovvero il nuovo stato popolerà le visualizzazioni utente referenziate nei modelli di altri stati, con il contenuto dei modelli associati alle viste nello stato attualmente attivo .
Gli URL seguono la gerarchia degli stati, ma sono indipendenti da essi, quindi uno stato 'site.home' può avere un URL di '/ home/contenuto', che verrà aggiunto ad un url associato al suo stato genitore ('sito') , a meno che non sia esplicitamente detto di non farlo.
Quindi una modifica/transizione di stato può essere attivata dall'u-sref o cambiando l'url tramite il link href o manualmente nel browser dall'utente.
Un altro modo per attivare internamente il cambiamento di stato (ad esempio in un controller che può anche essere definito per ogni stato) è utilizzare il metodo $ state.go (...).
Comprendendo ciò, ho semplicemente cambiato i riferimenti ui-sref a href urls. Anche se questa non è una soluzione diretta al mio problema, e ancora non capisco perché l'ui-router non stia generando hrefs corrispondenti, fa funzionare le cose come previsto. Devo ancora esplorare l'uso di $ state.go() per raggiungere il mio obiettivo.

Answer 2

Non sono sicuro che sia nuovo o meno, ma c'è un modo per passare i parametri quando si utilizza ui-sref. Nel tuo caso, sarebbe qualcosa di simile:

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

(per uno stato site.home.news in voi app, con un parametro newsID nel suo URL corrispondente, e considerando news.id punti alla ID notizia nella corrente $scope)

Vedere la documentazione here.