угловой активная ссылка навигация

Угловой начинающий здесь. Я пытаюсь в основном активировать свою связь, когда я нахожусь на данной странице. Найдено несколько примеров, ни одна из которых не работает, поэтому должно быть, что я ошибаюсь.угловой активная ссылка навигация

Это то, что я пытался (контроллер):

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 
     }); 
    }])

Поэтому независимо от того, на какой странице я m, расположенное на, ng-class ничего не делает без ошибок в консоли. Однако, если я делаю это для дома:

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

Тогда я получаю активный класс по моей ссылке, и это выход:

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

Что я здесь делаю неправильно? Почему он не интерполирует функцию isActive, как следует?

источник

2015-03-17 Gandalf StormCrow

У вас не может быть логики для проверки активной связи внутри вашего HomeCtrl, поскольку это один из маршрутов. Когда загружаются другие маршруты, загружается HomeCtrl.

Должен быть контроллер, определенный вне ng-view, например RootCtrl. Должна быть добавлена функция isActive.

Поскольку область просмотра дочернего объекта имеет доступ к родительской области, вы можете использовать isActive в дочерних представлениях нормально.

Update: Рассмотрим HTML

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

Добавьте IsActive функцию на RootCtrl.

источник

2015-03-17 03:13:13 Chandermani

@Chadremani вы можете проиллюстрировать это, например, я не уверен, что я следую. Прежде всего у меня нет RootCtrl –

угловой активная ссылка навигация

ответ

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