Maison  >  Article  >  interface Web  >  AngularJS développe WebApp pour obtenir un effet de bouton de saut de surbrillance, comment utiliser ui-sref et ui-sref-active

AngularJS développe WebApp pour obtenir un effet de bouton de saut de surbrillance, comment utiliser ui-sref et ui-sref-active

一个新手
一个新手original
2017-09-23 09:39:061978parcourir

AngularJS développe WebApp pour obtenir un effet de bouton de saut de surbrillance, comment utiliser ui-sref et ui-sref-active

L'effet de surbrillance de la barre de menu en bas de la WebApp doit utiliser une commande. En fait, il doit également effectuer une interaction, c'est-à-dire qu'il doit sauter lorsqu'on clique dessus. Dans ce cas, ui est généralement utilisé.router est une instruction du module de routage. Il existe généralement deux façons de sauter. L'une consiste à utiliser des instructions pour sauter et l'autre consiste à utiliser des services pour sauter. L'instruction

est ui-sref, ce qui équivaut à lier un événement de clic à cet élément. Lorsque cet élément est cliqué, il passera à la page ou à l'itinéraire correspondant.

Lorsqu'on clique en même temps, le bouton doit également avoir un effet de surbrillance. Cette commande s'appelle ui-sref-active=”select”

html

<ul class="bg-w foot">
  <li ui-sref-active="select" ui-sref="main"><span>首页</span></li>
  //这个意思是说如果当前点击的路由是main的话,首先点击这个路由会跳转到main的页面,
  //然后如果当前页面就是它的话,那么就会包含select这个样式类的名称  <li ui-sref-active="select" ui-sref="search"><span>附近</span></li>
  <li ui-sref-active="select" ui-sref="me"><span>我</span></li></ul>
<.>Itinéraire

&#39;use strict&#39;;
angular.module(&#39;app&#39;).config([&#39;$stateProvider&#39;, &#39;$urlRouterProvider&#39;, function($stateProvider, $urlRouterProvider) {
  $stateProvider.state(&#39;main&#39;, {
    url: &#39;/main&#39;,
    templateUrl: &#39;view/main.html&#39;,
    controller: &#39;mainCtrl&#39;
  });
  $urlRouterProvider.otherwise(&#39;main&#39;);
}])
.Moins de fichier

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn