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：如何在按下时直接突出显示活动导航项目？

回答

相关问题