Różne tła dla różnych stanów UI-router

W uproszczonym scenariuszu mam dwa UI-router stany i chcę dla nich różne kolory tła ciała.Różne tła dla różnych stanów UI-router

Idealnie, chciałbym w ten sposób chciał wykonać następujące czynności:

<body ng-class="background" ui-view> 
</body>

a następnie w kontrolerze dla państw zestaw klas tła (które mogą mieć charakter dynamiczny, co oznacza: obliczone w kontrolerze):

Ale umieszczenie atrybutu ui-view na ciele usuwa go. Więc muszę umieścić atrybut ui-view na div wewnątrz ciała.

<body> 
    <div ui-view></div> 
</body>

Jak mogę teraz kontrolować tło ciała?

Jestem świadomy różnych hacków (np. Dostęp do własności DOM klasy ciała w funkcji onEnter UI-Router, ...), ale czy jest to dobry sposób na zrobienie tego?

Albo jest to wszystko o co pełną wysokość div[ui-view] (co jest not trivial) i ustawienie tła na ten element do mimick jak przyłożenie background on the body takes up the full viewport?

Źródło

2015-07-21 jack_kerouac

Więc Podsumowując moje learnings, istnieją dwa sposoby, aby to zrobić. Oba wymagają usługi $state, aby być w $rootScope. Elegancja tego can be disputed, ale pójdę po to rozwiązanie.

Jeśli zajęcia tła są zależności od stanu tylko, dodaj je do państwa custom data:

przykładu kodu:

.state({ 
    ..., 
    data: { 
     bodyClass: 'bg1' 
    } 
});

następnie na ciele, położyć ng-class i podaj dane bieżącego stanu:

<body ng-class="$state.current.data.bodyClass">

Jeśli klasy tła to (oprócz stanu) w zależności od czegoś innego (jak parametr stanu lub usługa, ...), Użyj state's resolve mechanism: kod

Przykład:

.state({ 
    ..., 
    resolve: { 
     bodyClass: function($stateParams) { 
      // do some calculation 
      return ... 
     } 
    } 
});

Następnie na ciele, położyć ng-class i odwoływać się rozwiązać nazwę klasy poprzez $state.$current.locals.globals:

<body ng-class="$state.$current.locals.globals.bodyClass">

w obu przypadkach , bodyClass może cokolwiek, co jest ważne dla ng-class directive.

Źródło

2015-07-23 13:16:09

Btw. [The Angular UI-Router title plugin] (https://github.com/nonplus/angular-ui-router-title) do aktualizacji tytułu strony robi [coś podobnego] (https://github.com/nonplus/angular -ui-router-title/blob/master/src/angular-ui-router-title.js # L6) –

To działało dla mnie! - Po prostu chcę zaznaczyć, że aby go uruchomić, musisz uruchomić '$ rootScope. $ State = $ state;' z wnętrza '.run', gdy zadeklarujesz swój moduł. Jest to wspomniane i pogrubione w pierwszym zdaniu odpowiedzi, ale nie podano żadnego przykładu. Możesz znaleźć przykładowy kod podążając za tym linkiem http://stackoverflow.com/questions/18572930/whats-the-purpose-ofting-rootscope-state-state-with-angular-ui-ui-rou, który jest również dostarczony w odpowiedzi –

Prawdopodobnie nie są dokładne, ale może po prostu można zmienić kolor tła ciała bezpośrednio w kontrolerze?

stateHelperProvider 
    .state({ 
     name: 'a', 
     url: '/a', 
     templateUrl: 'views/a.html', 
     controller: function ($scope) { 
      document.body.style.background = 'bg1'; 
     } 
    }) 
    .state({ 
     name: 'b', 
     url: '/b', 
     templateUrl: 'views/b.html', 
     controller: function ($scope) { 
      document.body.style.background = 'bg2'; 
     } 
    });

Czy w tym przypadku wystarczy dodać/usunąć klasy CSS do ciała?

Good Luck”

Źródło

2015-07-21 15:39:27

To działa i może być ok z zajęciami. Problem polega na tym, że jeśli mam stan "c" bez tła, pozostanie tło poprzedniego stanu. Mogę oczywiście posłuchać '$ destroy' na temat, ale to znowu nie jest dokładnie eleganckie. –

Co powiesz na kontroler na ciele z "ngStyle", który może uzyskać wartość strony i zmienić tło w zależności od warunku dotyczącego nazwy strony? Prawdopodobnie niezbyt dokładne, ale mam nadzieję, że to pomoże. –

Mogę prawdopodobnie mieć klasę tła jako [własność danych niestandardowych stanu] (https://github.com/angular-ui/ui-router/wiki#attach-custom-data-to-state-objects) i następnie wykonaj coś takiego: '' with '$ state' na' $ rootScope'. Nie dokładnie to, co zaproponowałeś, ale zainspirowałeś się tym. –

Różne tła dla różnych stanów UI-router

Odpowiedz

Powiązane problemy