Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript][AngularJS] podmiana części strony ng-view
colachips
post
Post #1





Grupa: Zarejestrowani
Postów: 49
Pomógł: 0
Dołączył: 12.01.2009

Ostrzeżenie: (0%)
-----


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.
Go to the top of the page
+Quote Post
PrinceOfPersia
post
Post #2





Grupa: Zarejestrowani
Postów: 717
Pomógł: 120
Dołączył: 18.04.2009

Ostrzeżenie: (0%)
-----


a próbowałeś $route.current?
https://docs.angularjs.org/api/ngRoute/service/$route

w połączeniu z ng-switch.
Go to the top of the page
+Quote Post
colachips
post
Post #3





Grupa: Zarejestrowani
Postów: 49
Pomógł: 0
Dołączył: 12.01.2009

Ostrzeżenie: (0%)
-----


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>
Go to the top of the page
+Quote Post
PrinceOfPersia
post
Post #4





Grupa: Zarejestrowani
Postów: 717
Pomógł: 120
Dołączył: 18.04.2009

Ostrzeżenie: (0%)
-----


a co masz w funkcji menu.isActive? (i w ogóle w kontrolerze)
Próbowałeś z $route.current?

Ten post edytował PrinceOfPersia 15.06.2014, 18:11:01
Go to the top of the page
+Quote Post
colachips
post
Post #5





Grupa: Zarejestrowani
Postów: 49
Pomógł: 0
Dołączył: 12.01.2009

Ostrzeżenie: (0%)
-----


  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ąć (IMG:style_emoticons/default/sad.gif)
Go to the top of the page
+Quote Post
PrinceOfPersia
post
Post #6





Grupa: Zarejestrowani
Postów: 717
Pomógł: 120
Dołączył: 18.04.2009

Ostrzeżenie: (0%)
-----


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..

Ten post edytował PrinceOfPersia 15.06.2014, 18:39:53
Go to the top of the page
+Quote Post
colachips
post
Post #7





Grupa: Zarejestrowani
Postów: 49
Pomógł: 0
Dołączył: 12.01.2009

Ostrzeżenie: (0%)
-----


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...
Go to the top of the page
+Quote Post
PrinceOfPersia
post
Post #8





Grupa: Zarejestrowani
Postów: 717
Pomógł: 120
Dołączył: 18.04.2009

Ostrzeżenie: (0%)
-----


Ale pokaż więcej kodu, jaki masz. Może gdzieś indziej jest problem.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 20.09.2025 - 17:09