AngularJS：を押すとアクティブナビアイテムを直接ハイライトする方法は？

私はangle js製のiPadアプリを持っています。ナビゲーションメニューにハイライト機能を追加しました。しかし、私はそれに完全に満足していません。ユーザーエクスペリエンスは最良ではありません。AngularJS：を押すとアクティブナビアイテムを直接ハイライトする方法は？

メニュー項目を押すと、瞬時に強調表示されません。長い時間はかかりませんが、アイテムを指で押したときに即座に強調表示されるようにするのがベストです。それをするために私はどうすればよいですか？ここで

私が持っているコードです：

HTML：

<div class="ui-navbar"> 

     <ul> 
      <li><a href="#!/" ng-class="getClass('/')" class="ui-state-persist ui-btn"><span>Home</span></a></li> 
      <li><a href="#!/about" ng-class="getClass('/about')" class="ui-state-persist ui-btn"><span>About</span></a></li> 
     </ul> 

    </div><!-- /navbar --> 

</div>

JS：

myApp.config(["$routeProvider", '$translateProvider', '$translatePartialLoaderProvider', function($routeProvider, $translateProvider, $translatePartialLoaderProvider) 
{ 
    $routeProvider 
    .when("/", { 
     templateUrl : "home.html" 
    }) 
    .when("/about", { 
     templateUrl : "about.html" 
    }); 

    $translateProvider.useLoaderCache(true); 

    $translatePartialLoaderProvider.addPart('locale'); 
    $translatePartialLoaderProvider.addPart('header'); 
    $translatePartialLoaderProvider.addPart('footer'); 

    $translateProvider.useLoader('$translatePartialLoader', { 
     urlTemplate: 'lang/{part}-{lang}.json' 
    }); 
    $translateProvider.preferredLanguage('sv'); 

}]); 

myApp.controller('HeaderCtrl', function ($scope, $translatePartialLoader, $location, $translate) { 

    $translatePartialLoader.addPart('header'); 

    $scope.getClass = function (path) 
    { 
     if ($location.path().substr(0, path.length) == path) 
     { 
      if (path == "/" && $location.path() == "/") 
      { 
      return "ui-btn-active"; 
      } 
      else if (path == "/") 
      { 
      return ""; 
      } 

     return "ui-btn-active" 
     } 
     else 
     { 
     return "" 
     } 
    } 

});

出典

2017-02-07 Peter Westerlund

は今までのリンクをクリックする代わりに待っているときは、CSSを設定することができます経路を変更する。以下を考慮する。

<body> 
    <span ng-controller="NaviCtrl"> 
    <ul ng-repeat="item in navi.items"> 
     <li> 
     <a ng-href="#{{ item.link }}" 
      ng-class="{ active: item.active }" 
      ng-bind="item.name" 
      ng-click="navi.setActive(item)"> 
     </a> 
     </li> 
    </ul> 
    <div ng-view></div> 
    </span> 
</body>

angular 
.module('app', ['ngRoute']) 
.value('navi', { 
    items: [{ 
    name: 'Home', 
    link: '/', 
    active: true 
    },{ 
    name: 'About', 
    link: '/about', 
    active: false 
    }], 
    setActive: function(item) { 
    angular.forEach(this.items, function(current) { 
     current.active = angular.equals(current, item); 
    }); 
    } 
}) 
.config(function($routeProvider) { 
    $routeProvider 
    .when('/', { 
     template : '<div>Home</div>' 
    }) 
    .when('/about', { 
     template : '<div>About</div>' 
    }); 
}) 
.controller('NaviCtrl', function($scope, navi) { 
    $scope.navi = navi; 
});

ul > li .active { 
    background-color: #00dd00; 
}

出典

2017-02-07 21:51:25

それは絶対的なインスタントハイライトを取得することは不可能だということを見出しました。「Tab1」と「

Tab1

」というタブを使っても、あなたはそうしているにもかかわらず、角度のあるjsで少し遅延があるようです。私は今、代わりにMobile Angular UIを見ています。 http://mobileangularui.com/docs/#sharedstate-service-and-ui-directives –

AngularJS：を押すとアクティブナビアイテムを直接ハイライトする方法は？

答えて

関連する問題