AngularJs: Ukryj element nawigacyjny na podstawie trasy?

Próbuję dowiedzieć się, jak wyświetlić lub ukryć element w moim pasku nawigacyjnym na podstawie trasy lub wyświetlanego bieżącego widoku. Na przykład mam podstawowy/zaawansowany przycisk przełączania, który umieszczam w pasku nawigacyjnym (Bootstrap 3), gdy użytkownik znajduje się w formularzu wyszukiwania. Ale gdy są nigdzie indziej w aplikacji, przycisk przełączania powinien być ukryty.AngularJs: Ukryj element nawigacyjny na podstawie trasy?

Pod względem DOM, to tylko element listy, który buduje nav. Nie jestem pewien, czy powinienem pokazać się lub ukryć w oparciu o globalną wartość, która jest ustawiona w każdym widoku, czy też mogę po prostu użyć nazwy trasy lub widoku. Jeśli tak, to jak to działa?

Dzięki!

Źródło

2014-05-23 Eddie

Jednym rozwiązaniem jest zbudowanie funkcję kontrolera, który jest odpowiedzialny za pasku nawigacyjnym, który może być przeszukiwana w celu określenia, czy powinien zostać wyświetlony element:

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

(Powyższy kod używa $location usługę kątowej za)

Następnie w szablonie, można pokazać/ukryć na podstawie wyniku połączenia (przechodzącej w trasie, która powinna przełączyć wyświetlanie elementu):

ng-show="isActive('/search-form')"

Źródło

2014-05-23 20:53:09 dylants

Dzięki, że będzie działać na pewno, dlatego też oznaczone jako odpowiedź. Po zgłoszeniu pytania zdałem sobie sprawę, że prawdopodobnie nie powinienem umieszczać funkcji wyszukiwania w pasku nawigacyjnym, dlatego przeniosłem przycisk przełącznika na samą górę formularza wyszukiwania. Teraz nazywam funkcję w kontrolerze wyszukiwania, która przełącza wartość "advancedSearch" i ustawiam ng-show dla tych elementów za pomocą właściwości advancedSearch. Niemal to samo, ale nie ustawiam właściwości kontrolerów, co na razie jest dla mnie prostszym rozwiązaniem. – Eddie

Świetnie, cieszę się, że to działa! – dylants

To działało dla mnie, ale odkryłem, że ta funkcja jest wywoływana 7 lub 8 razy dla każdej zmiany nawigacji. Czy wiesz, dlaczego tak się stało? – Skitterm

Oto podejście Wziąłem ze ui-router:

Chcę tylko, aby ukryć pasek nawigacyjny dla niewielkiej liczby stron, więc poszedłem z opt out własności na państwo (-a), że chcę, aby ukryć pasek nawigacyjny.

.state('photos.show', { 
    url: '/{photoId}', 
    views: { 
    "@" : { 
     templateUrl: 'app/photos/show/index.html', 
     controller: 'PhotoController' 
    } 
    }, 
    hideNavbar: true 
})

Inject $state kontroler Twojego NavBar i narażać go na szablonie:

$scope.state = $state;

Następnie dodać ng-hide do szablonu NavBar:

<nav ng-hide="state.$current.hideNavbar" ...

Źródło

2016-03-06 22:29:21

super eleganckie rozwiązanie – eabates

Przede działa idealnie za pomocą ui-Router don zapomnij przekazać $scope i $state w ramach swojej funkcji

Przykład:

app.controller('LoginCtrl', function($scope, $state){ 
 
     $scope.state = $state; 
 
     console.log($state); // this will return the current state object just in case you need to see whats going on for newbies like me :) 
 
    });

Źródło

2016-11-01 19:30:25 soloproper

AngularJs: Ukryj element nawigacyjny na podstawie trasy?

Odpowiedz

Powiązane problemy