AngularJS: Как выделить активный элемент навигации непосредственно при нажатии?

У меня есть приложение для iPad, сделанное угловыми js. Добавили основные функции в навигационное меню. Но я не вполне доволен этим. Пользовательский опыт не самый лучший.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: Как выделить активный элемент навигации непосредственно при нажатии?

ответ

Смежные вопросы