AngularJS：如何在按下時直接突出顯示活動導航項目？

我有一個由角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的一個小延遲，但你做。我正在盯着看現在的移動Angular UI。 http://mobileangularui.com/docs/#sharedstate-service-and-ui-directives –

AngularJS：如何在按下時直接突出顯示活動導航項目？

回答

相關問題