Ostatnio tworząc jeden view w angular, miałem za zadanie wyśrodkować całość na stronie. Przecież to nie może być nic trudnego? Mam style, aplikuje je i po sprawie.
No właśnie ;) nie za bardzo, w szczególności kiedy macie podział widoków jako partial i jedną stronę master.
Ogólnie wygląda to mniej więcej tak:
<html> <head></head> <body> <!-- zmienia sie w div ui-view class=ng-scope <div ui-view></div> </body> </html>
Ustawienie stylu na klasę ng-scope spowoduje, że każdy wasz scope będzie miał taki styl – jeżeli macie view w view to nagle wszystko zajmuje wam w moim przypadku 100% wysokości. Dodanie klasy do <div ui-view> spowoduje, że wszystko co zostanie tam wstrzyknięte też przyjmie te ustawienia. W waszym przypadku, może to będzie OK, w moim psuło widoki, które nie musiały być wyśrodkowane.
Zaś nałożenie stylu nad element nadrzędny czy podrzędny nic nie daje. Nie jestem specjalistą od CSS więc za bardzo nie będę wstanie tego wam wytłumaczyć, ale ;) uwierzcie mi, że u mnie nie działało :)
Rozwiązaniem okazało się napisanie dyrektywy, którą wstrzykuje w pierwszy podrzędny element na widoku, czyli jeżeli zakładamy, ze mamy taki szablon jak wyżej wkleiłem to mój partial wygląda tak:
<div class="center" full-height> <!-- pozostale elementy --> </div>
center powoduje, że div jest umiejscowiony po środku strony (znów jakaś tam magia CSS), zaś dyrektywa full-height powoduje, że do elementu nadrzędnego dodawana jest klasa, która ustawia mu odpowiedni height, w tym przypadku 100%.
Dyrektywa sama w sobie jest bardzo prosta:
app.directive('fullHeight', [function () {
return {
restrict: 'A',
link: function(scope, elm, attrs, ctrl) {
elm.parent().addClass('full-height');
}
};
}]);
A rozwiązanie na tyle mi się podoba, że mogę teraz w dowolnym view stwierdzić, że ma ono być wypośrodkowane i za pomocą kilku znaków nie muszę się już niczym przejmować.
