相关疑难解决方法(0)

如果我在引导程序中有一个带有项目的导航栏

Home | About | Contact

如何为每个菜单项激活时设置活动类？也就是说,如何设置class="active"角度路径的时间

1. #/ 为了家
2. #/about 对于关于页面
3. #/contact 对于联系页面

可能重复:
使用AngularJS设置活动选项卡样式

我正在使用AngularJS并尝试在显示该选项卡的内容时向我的菜单添加"当前"类.这是我到目前为止,它在加载页面时工作正常:

HTML:

<ul id="nav">
    <li><a href="#/one" class="highlighttab">One</a></li>
    <li><a href="#/two" class="highlighttab">Two</a></li>
</ul>

JS:

myModule.directive('highlighttab', function($location) {
    var currentPath = "#" + $location.path();

    return {
        restrict: 'C',
        link: function(scope, element, attrs) {
            var href = element.attr("href");
            if (currentPath == href)
            {
                element.addClass("current");
            }
        }
    };
});

<a>当页面网址为#/one或时,这会将"当前"类添加到正确的标记中/#two

问题是如果我单击第二个选项卡,该类不会添加到它.我想我需要一些方法来获取指令中的代码,以便在URL更改时重新运行.有没有办法做到这一点？

我还在学习Angular并开始创建一个简单的网站.我在视图中有路由和一些逻辑,当网址在该页面上时,菜单项上有一个活动类.我开始看到的问题是,如果我将URL更改为/ to/home,我必须在路由和视图中更新它,并且还要检查逻辑是否应该是活动的.

我想知道是否有更好的方法让它干涸？

我的app.js文件如下所示:

    angular.module('simpleApp', ['ngRoute'])
  .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/home/index.html'
      })
      .when('/about', {
        templateUrl: 'views/about/index.html',
        controller: 'AboutController',
        controllerAs: 'aboutCtrl'
      })
      .when('/services', {
        templateUrl: 'views/services/index.html',
        controller: 'ServicesController',
        controllerAs: 'servicesCtrl'
      })
      .when('/contact', {
        templateUrl: 'views/contact/index.html',
        controller: 'ContactController',
        controllerAs: 'contactCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  }]);

我的index.html的部分视图如下所示:

<nav class="navbar navbar-inverse" ng-controller="NavController as navCtrl">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span …

新手在angularjs。尝试学习一些新东西。

我有一个简单的页面，当用户导航到不同的页面时，我需要active在各自li的menuitem. 以下是我添加路线的方式。

angular.module('home', ["ngRoute"]).
config(function ($routeProvider, $locationProvider) {
    $routeProvider.
        when('/home', { templateUrl: 'partials/home.html', controller: "homeController", activetab: "home" }).
        when('/about', { templateUrl: 'partials/about.html', activetab: "about" }).
        when('/gallery', { templateUrl: 'partials/gallery.html', activetab: "gallery" }).
        when('/contact', { templateUrl: 'partials/contact.html', activetab: "contact" }).
        when('/services', { templateUrl: 'partials/services.html', activetab: "services" }).
        when('/house', { templateUrl: 'partials/house.html', activetab: "house" }).
        otherwise({ redirectTo: '/home', templateUrl: 'partials/home.html', activetab: "home" });
    $locationProvider.html5Mode(true);
}).controller("homeController", function ($scope, $http, $route) {
    $scope.$route = $route; …

我有一个component()注入导航的。当我尝试像这样包含controller内部时component，出现错误。

内部导航.html

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Demo</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse" ng-controller="MainMenuController">
      <ul class="nav navbar-nav">
        <li ng-class="{ active: isActive('') }"><a href="./">home</a></li>
        <li ng-class="{ active: isActive('/skus') }"><a href="sku.html">sku</a></li>
        <li ng-class="{ active: isActive('/phones') }"><a href="phone.html">phone</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

在 component.js 中

angular.
module('mainMenu').
component('mainMenu', {
  templateUrl: 'app/core/nav/nav.html',
  controller: 'MainMenuController', …