AngularJS + UI-Router: Voir si href ou de l'interface utilisateur-sref correspond à un état

Donc, actuellement, je suis à l'aide de l'INTERFACE utilisateur du Routeur afin de gérer un ensemble d'onglet directives. Par onglets, je veux dire cette INTERFACE utilisateur paradigme: http://www.hollance.com/wp-content/uploads/2011/11/Screenshot.png

Chaque onglet est en mesure d'avoir un title, un icon, et un href ou ui-sref associés.

Exemple:

<my-tabs>
  <my-tab title="Tab 1" href="#/tab1">
    Content when tab 1 is active!
  </my-tab>
  <my-tab title="Tab 2" ui-sref="tabs.numberTwo()">
    Content when tab 2 is active!
  </my-tab>
</my-tabs>

De toute façon, le principal problème est que, lorsque l'état est modifié par programmation ou par l'intermédiaire d'un navigateur actualiser, je veux être en mesure de savoir qui onglet pour sélectionner, sur la base soit de la ui-sref ou href attribut. $state.(is|includes|contains) ne semblent pas faire ce dont j'ai besoin: je ne peux pas donner $state.is un href et demandez-lui si elle correspond à l'état actuel, ni puis-je lui donner une interface utilisateur-sref.

C'est possible, je pourrais ajouter un stateName attribut ou de l'onglet, mais je préfère ne pas le faire si je n'ai pas à.

En gros, j'aimerais être capable de le faire dans l'onglet directive:

$rootScope.$on('$stateChangeSuccess', function() {
   if ($state.matchesHref(attrs.href) || $state.matchesSref(attrs.uiSref)) {
    selectThisTab();
  }
});

Des idées à tous pour ce faire serait la bienvenue!

vous pouvez obtenir ce dont vous avez besoin à partir de la fenêtre.emplacement?
Sorte de - il ya une autre couche pour le problème. Que faire si l'utilisateur est dans un état d'enfant? Par exemple, l'onglet s'ouvre une interface utilisateur-pour afficher la liste des' état, mais la navigation est la liste.détails de l'état? Je suppose que j'ai pu vérifier l'emplacement, à savoir qu'il "contient" l'état de la liste, puis de l'activer et de l'ui-view à l'intérieur de rendre l'état d'enfant ... je vais essayer, merci.
savez-vous si il existe un moyen d'obtenir un etat avec des paramètres d'une interface utilisateur-sref attribut? Alors je pourrais faire de même pour l'interface utilisateur-sref. Ne ui-router exposer la façon dont ils le font en interne, dans un service ou de l'? Je voudrais creuser dans le code source, mais n'ont pas le temps en ce moment.
ui-sref n'est pas réellement prise en charge dynamique des valeurs. Le fait qu'elle "fonctionne" est involontaire d'effets secondaires. github.com/angular-ui/ui-router/issues/395 github.com/angular-ui/ui-router/issues/745 github.com/angular-ui/ui-router/pull/644

OriginalL'auteur Andrew Joslin | 2014-03-21

  1. 4

    Caisse prochaine méthodes:

    http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$état

    • is()
    • contains()
    • includes()
    Le problème avec ces derniers est je n'ai pas de réel nom de l'état pour le match contre; j'ai une interface utilisateur-sref (qui est une fonction), ou un href ni de qui je peux utiliser ces méthodes de match. $state.is('/some/url'), $state.is('someState({ param: value })'), etc ne fonctionnent pas
    utiliser $état.est correcte: $state.is('admin.website',{siteId: 1})

    OriginalL'auteur Miraage

  2. 3

    J'ai donc finalement réussi à le faire fonctionner, merci à tous.

    J'ai vérifier à l'emplacement$.href() pour attrs.href, et de diviser le sref pour obtenir son stateName pour attrs.uiSref.

    Le split n'est pas souhaitable, mais c'est le meilleur que j'ai pu trouver à droite maintenant.

    $rootScope.$on('$stateChangeSuccess', selectTabIfMatchesState);
function selectTabIfMatchesState() {
  //get rid of leading # if it exists, to match against $location.path()
  var href = $attr.href && $attr.href.replace(/^#/, '');

  //uiSref is laid out as 'stateName({params})', get only 'stateName'
  var stateName = $attr.uiSref && $attr.uiSref.split('(')[0];

  var includesState = stateName && $state.includes(stateName);
  var includesHref = href && $location.path().indexOf(href) === 0;

  if (includesHref || includesState) {
    //this tab matches current state, go to it!
    tabsCtrl.select($scope);
  }
}
    pouah... il serait bon de voir un exemple de travail sur un violon/plunker.
    u pourrait plz ajouter un exemple

    OriginalL'auteur Andrew Joslin