Question

我的Angular应用有几种观点。包含index.html的{{1}}文件也有一个标题/导航栏，其中包含指向其中每个视图的链接。

<div ng-view></div>配置为加载相应的视图及其控制器。

考虑到这种设置，每个视图都有自己的控制器，在应用程序中导航时如何将CSS $routeProvider添加到标题中的相应链接？

额外信息： 我在链接中添加了class="active"和ng-click="set_page_id(x)"，并意识到没有与ng-class={active: active_page_id === x}相关联的控制器。我编写了一个jQuery函数，通过监听单击事件来使其工作，但当视图本身调用另一个视图时它不起作用。我想知道是否有更好的Angular方式。

Answer 1

您的主控制器或导航控制器具有以下内容：

app.controller('mainCtrl', function($scope, $rootScope, $location) {

  $scope.menu = [
    {label:'Home', route:'/'},
    {label:'About', route:'/about'},
    {label:'Contact', route:'/contact'}
   ]

  $scope.menuActive = '/';

  $rootScope.$on('$routeChangeSuccess', function(e, curr, prev) {
   $scope.menuActive = $location.path();
});

});

然后

<li ng-repeat="item in menu" ng-class="{active: item.route == menuActive }"><a href="#{{item.route}}" >{{item.label}}</a> </li>

继承人Plunker

将Controller添加到Angular SPA中的index.html

1 个答案: