Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][AngularJS] podmiana części strony ng-view
Forum PHP.pl > Forum > Przedszkole
colachips
Witam,

Jestem bardzo początkujący w AngularJS i chciałbym aby dodatkowo, poza widokiem (view1, view2, view3), zostało załadowane <menu1> lub <menu2>, w zależności czy jesteśmy na stronie głównej (view1 - wtedy chcę menu1) czy na jakiejkolwiek innej stronie (wtedy menu2). Więc coś mniej więcej takiego:
  1. <li><a href="#/view1">View1</a></li>
  2. <li><a href="#/view2">View2</a></li>
  3. <li><a href="#/view3">View3</a></li>
  4. ...
  5. <div ng-view></div>
  6. <!-- oto problem -->
  7. <div ng-controller="MenuCtrl as menu">
  8. <menu1 ng-show="{{ menu.isActive('/view1') }}"></menu1>
  9. <menu2 ng-show="{{ !menu.isActive('/view1') }}"></menu2>
  10. </div>


Po kliknięciu w któryś link ładuje się odpowiedni widok w ng-view, czyli to działa dobrze. Jednak menu nie zostaje podmienione...

Wiem na czym mniej więcej polega problem (ng-view ładuje widok, ale nie wie żeby podmienić menu). Nie mam jednak pomysłu na mądre rozwiązanie (takie, żeby nie było DRY)...

Dzięki i pozdr.
PrinceOfPersia
a próbowałeś $route.current?
https://docs.angularjs.org/api/ngRoute/service/$route

w połączeniu z ng-switch.
colachips
Niestety nie wiem co mam zrobić. Próbowałem zamienić ng-show na ng-switch, ale to działa tak samo (czyli trzeba dodatkowo odświerzyć stronę ręcznie aby prawidłowe menu się pokazało)...
  1. <div ng-controller="MenuController as menu">
  2. <div ng-switch="{{ menu.isActive('/view1') }}">
  3. <div ng-switch-when="true">
  4. <menu1></menu1>
  5. </div>
  6. <div ng-switch-default>
  7. <menu2></menu2>
  8. </div>
  9. </div>
  10. </div>
PrinceOfPersia
a co masz w funkcji menu.isActive? (i w ogóle w kontrolerze)
Próbowałeś z $route.current?
colachips
  1. controller('MenuController', ['$location', function($location) {
  2. this.isActive = function (viewLocation) {
  3. return viewLocation === $location.path();
  4. };
  5. }])


$route.current nie próbowałem, bo nie wiem gdzie i jak podpiąć sad.gif
PrinceOfPersia
wywal klamerki:
ng-switch="{{ menu.isActive('/view1') }}
-->
ng-switch="menu.isActive('/view1') "

no i dlatego pewnie ng-show nie działało (przez klamerki)

btw. miałem na myśli bardziej coś w rodzaju

Kod
<div ng-switch="$location.path()">

<div ng-switch-when="/view1"> </div>
<div ng-switch-when="/view2"> </div>

</div>

ale to drobiazg..
colachips
Problem w tym, że to moje działa ale źle.

1. wchodzę na stronę główną: http://localhost/app/#/view1 - ładuje się content ng-view dla view1 oraz menu1.html - OK
2. przechodzę na inną podstronę: http://localhost/app/#/view2 - ładuje się content ng-view ale menu1.html pozostaje nadal (chcę załadować menu2.html od razu) - NIE OK
3. robię ctrl+r i dopiero teraz menu2.html się ładuje...

Może zamiast tak kombinować po prostu wkleję te <menu*></menu*> do wszystkich podstron (view1.html, view2.html itd.) i już? Będzie brzydko, ale co tam...
PrinceOfPersia
Ale pokaż więcej kodu, jaki masz. Może gdzieś indziej jest problem.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.