Question

角度初学者在这里。一旦我在一个给定的页面上，我试图基本上让我的链接处于活动状态。发现了很多例子都没有用，所以一定是我做错了。

这就是我一直在尝试的（控制器）：

angular.module('MyApp')
  .controller('HomeCtrl', ['$scope', function ($scope) {
    $('body').addClass('homepage');

    $scope.isActive = function(route) {
      return route === $location.path();
    }
  }]);

Html：

<li "ng-class" = "{active:isActive('/') || isActive('/home')}"> 
Home
</li>
<li "ng-class" = "{active:isActive('/about')}"> 
About
</li>
<li "ng-class" = "{active:isActive('/contact')}"> 
Contact
</li>

申请本身：

var app = angular
    .module('MyApp', [
        'ngAnimate',
        'ngCookies',
        'ngResource',
        'ngRoute',
        'ngSanitize',
        'ngTouch',
        'templates', 
        'ng-token-auth'
    ]).config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
        $routeProvider
            .when('/home', {
                templateUrl: 'home.html',
                controller: 'HomeCtrl'
            })
            .when('/', {
                templateUrl: 'home.html',
                controller: 'HomeCtrl'
            })
            .when('/contact', {
                templateUrl: 'contact.html',
                controller: 'ContactCtrl'
            })
            .when('/about', { 
                templateUrl: 'about.html', 
                controller: 'AboutCtrl' 
            })
            .otherwise({
              redirectTo: '/'
            });
        $locationProvider.html5Mode({
          enabled: true,
          requireBase: false
        });
    }])

所以无论我在哪个页面，ng-class都没有在控制台中没有任何错误。但是，如果我在家里这样做：

<li "ng-class" = "{active:true}"> 
    Home
    </li>

然后我在链接上获得了活动课程，这是输出：

<li ng-class="{active:true}" class="active">
Home
</li>

我在这里做错了什么？为什么不插入函数isActive呢？

Answer 1

您无法使用逻辑来检查HomeCtrl中的活动链接，因为它是其中一条路由。加载其他路径时，没有加载HomeCtrl。

应该在ng-view之外定义控制器，例如RootCtrl。应将isActive函数添加到其中。

由于子视图范围可以访问父范围，因此您可以正常使用子视图中的isActive。

更新：考虑一下html

<body ng-controller='RootCtrl'>
   <div ng-view></div>
</body>

在RootCtrl上添加isActive功能。

角度主动链接导航

1 个答案: