Как добавить и удалить классы по угловому пути?

У меня есть эта директива с 4 кнопками, где я хочу добавлять и удалять классы, когда я нахожусь на одной из страниц.Как добавить и удалить классы по угловому пути?

Например, когда я нахожусь на «внешней» кнопке, которую нужно удалить, и когда я нахожусь на «внутреннем», чтобы удалить только внутреннюю кнопку.

Должен ли я добавить что-то в «внешний контроллер»?

<section> 
    <nav> 
     <ul class="nav footer-tabs"> 
      <li class="exterior col-sm-4"><a href="#/exterior"><img src="img/colour-options.png"></a></li> 
      <li class="interior col-sm-4"><a href="#/interior"><img src="img/Interior-360.png"></a></li> 
      <li class="gallery col-sm-4"><a href="#/gallery"><img src="img/View-Gallery.png"></a></li> 
      <li class="discover col-sm-4"><a href="#"><img src="img/UP-Discover.png"></a></li> 
     </ul> 
    </nav> 
</section>

источник

2015-03-20 logic ltd

Вы можете использовать класс ng для условно применяемых классов: http://jsfiddle.net/HB7LU/11983/ – TeoMor

menuItem Учитывая директиву по каждой li из меню:

//Don't forget the $location dependency, to retrieve the current path 
pf_app.directive('menuItem', ["$location", function ($location) { 
    return{ 
     restrict: 'A', 
     link : function (scope, element, attr) { 
      //Watch location change event 
      scope.$on('$locationChangeSuccess', function(){ 
       //Get the current path 
       var path = $location.path(), 
       //Get the child link of the current element 
        href = element.children("a").attr("href").slice(1); 
       //If the paths matches 
       if (href == path) 
        //Add the class 
        element.addClass("active"); 
       else 
        //Remove it 
        element.removeClass("active"); 
      }); 

     } 
    } 
}]);

источник

2015-03-20 13:38:11 Bigood

Вы должны сделать переменной и использовать нг-класс

например $ Scope.page ваш переменный правопреемник этого значения в зависимости от страницы

if(currentpage==exterior)$scope.page=1 
if(currentpage==interior)$scope.page=2 
if(currentpage==gallery)$scope.page=3 
if(currentpage==discover)$scope.page=4

Затем используйте директиву так:

<section> 
    <nav > 
    <ul class="nav footer-tabs"> 
     <li class="exterior col-sm-4" ng-class="{'disable':page==1}"><a href="#/exterior"><img src="img/colour-options.png"></a></li> 
     <li class="interior col-sm-4" ng-class="{'disable':page==2}"><a href="#/interior"><img src="img/Interior-360.png"></a></li> 
     <li class="gallery col-sm-4" ng-class="{'disable':page==3}"><a href="#/gallery"><img src="img/View-Gallery.png"></a></li> 
     <li class="discover col-sm-4" ng-class="{'disable':page==4}"><a href="#"><img src="img/UP-Discover.png"></a></li> 
    </ul> 
    </nav> 
</section>

и если вы хотите, чтобы скрыть кнопки есть лучший способ, использовать ng- скрыть вместо нг-класса, например:

<section> 
    <nav > 
    <ul class="nav footer-tabs"> 
     <li class="exterior col-sm-4" ng-hide="page==1"><a href="#/exterior"><img src="img/colour-options.png"></a></li> 
     <li class="interior col-sm-4" ng-hide="page==2"><a href="#/interior"><img src="img/Interior-360.png"></a></li> 
     <li class="gallery col-sm-4" ng-hide="page==3"><a href="#/gallery"><img src="img/View-Gallery.png"></a></li> 
     <li class="discover col-sm-4" ng-hide="page==4"><a href="#"><img src="img/UP-Discover.png"></a></li> 
    </ul> 
    </nav> 
</section>

источник

2015-03-20 13:39:53

поэтому, если я использую это с ng-hide, моя внешняя вкладка не скрыта. 'app.controller ('ExteriorController', function ($ scope) { console.log ('EXTERIOR'); removeWebGlMessage(); if (currentpage == external) $ scope.page = 1; });' –

@logicltd Это не очень оптимально, вам придется обновлять переменную области видимости каждый раз, когда изменяется ваша страница, и вы добавите дополнительный код для каждой страницы. Подумайте об использовании директивы вместо этого, и пусть угловая ручка для вас. – Bigood

Существуют разные подходы, но попробовать этот

<li ng-class="{interior: currentpage == 'interior'}">

где текущая страница представляет собой текущую переменную $ scope, это означает, что внутренний класс будет добавлен, когда текущая страница будет равна внутренней.

источник

2015-03-20 13:42:11 user3281440

Как добавить и удалить классы по угловому пути?

ответ

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