Nadpisywanie widoków w ui-router

0

Witajcie,
Mam kod taki jak poniżej:
index.html:

<!-- Ładowanie angulara i appki w head -->
<body>
    <div ui-view="header"></div>
    <div ui-view="content"></div>
    <div ui-view="header"></div>
</body>

konfiguracja appki:

.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/home");
    $stateProvider
        .state("root", {
            abstract: true,
            views: {
                header: {
                    templateUrl: "template/header.html"
                },
                content: {
                    templateUrl: "template/content.html"
                },
                footer: {
                    templateUrl: "template/footer.html"
                }
            }
        })
        .state("root.home", {
            url: "/home",
            views: {
                "content@root": {
                    templateUrl: "template/home/content.html"
                }
            }
        });

Problem polega na tym, że przy przejściu do /home ui-view="content" nie zostaje nadpisany templatem z "template/home/content.html" tylko pozostaje template z "template/content.html".
Dlaczego tak sie dzieje i jak temu zaradzić?

0

Nie jestem pewna, czy dobrze rozumiem, co chcesz zrobić.
Twoja strona podzielona jest na header, content i footer., które domyślnie mają zawartość odpowiednio "template/header.html", "template/content.html", "template/footer.html"

Teraz, masz jakiś url '..#home', i kiedy user do niego przejdzie, chcesz wyświetlić inny template w content? A co z header i footer? też się mają zmieniać?

0

Tutaj Plunker z moim problemem.
https://plnkr.co/edit/YcXDPrqlEP77Yk4ngdWq?p=preview

1

Nie jestem pewna, czy to ma być zagnieżdżony ui-view, czy zwykły, który się wymienia? root.home świadczy o tym, że chciałbyś mieć zagnieżdżony. W takim układzie, ten nadrzędny template (ten z root) też musi zawierać jakiś

, w tym divie bedzie się wyświetlał root.home.</p>

Jeśli nie chcesz zagnieżdżonych widoków, wtedy nie potrzebujesz root.home

0

Alternatywą może być użycie ng-include dla statycznych części strony (header i footer), a ng-view tylko dla content (bo jak rozumiem, content będzie się zmieniał w zależności od linku, np. #home).

1 użytkowników online, w tym zalogowanych: 0, gości: 1