【发布时间】：2015-08-20 17:55:13
【问题描述】：
我仍在学习 Angular 并已开始创建一个简单的网站。当 url 在该页面上时，我认为在菜单项上有一个活动类的路由和一些逻辑。我开始看到的问题是，如果我将 url 从 / 更改为 /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 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="/#/">SimpleApp</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li ng-class="{ 'active': navCtrl.isActive('/')}">
<a href="/#/">Home</a>
</li>
<li ng-class="{ 'active': navCtrl.isActive('/about')}">
<a href="/#/about">About</a>
</li>
<li ng-class="{ 'active': navCtrl.isActive('/services')}">
<a href="/#/services">Services</a>
</li>
<li ng-class="{ 'active': navCtrl.isActive('/contact')}">
<a href="/#/contact">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
如你所见，我在导航控制器上调用了 isActive 方法，但我必须始终确保我传入的 url 是正确的。
这是我的导航控制器：
angular.module('simpleApp')
.controller('NavController', function($scope, $location) {
this.isActive = function (url) {
return url === $location.path();
};
});
【问题讨论】：
-
我不认为它是重复的，因为这个问题已经回答了我是如何编写代码的。我的问题是如何让它变干。答案之一就是使用自定义指令，因此请看一下。所以谢谢你让我注意到这一点，因为我不知道在这里谷歌/搜索什么以确保我没有复制任何东西
-
我指的是公认的答案，这是最好的方法。不需要额外的指令或方法。您只需像
.when('/', { templateUrl: 'views/home/index.html', activetab: 'home' })那样向您的路线添加一个自定义属性，然后在您的 html 中您可以这样做<li ng-class="{active: $route.current.activetab == 'home'}"></li> -
我目前正在这样做，但它必须在两个地方更改它，而我试图只在一个地方更改它
-
啊，我明白了，那么指令可能是你最好的选择。实际上，我更喜欢 ui-router 模块而不是 ngRoute 模块来进行路由。它的功能要强大得多，并且已经有一个内置指令来处理许多其他事情中的活动选项卡。如果您还没有，它绝对值得一看。
标签： javascript angularjs