templateUrl ändert sich beim Aktualisieren oder Neuladen der Seite in AngularJS

Question

Ich verwende eckige Paketvorlage. Hier 11 Seiten geladen und 11 verschiedene Tasten wie folgt aus:

Hier ist die Route Code:

state('app.pagelayouts.fixedsidebar1', { 
    url: "/fixed-sidebar", 
    templateUrl: "assets/views/page-1.html", 
    resolve: loadSequence('d3', 'ui.knob', 'countTo', 'dashboardCtrl'), 
    title: 'Fixed Sidebar', 
    ncyBreadcrumb: { 
     label: 'Fixed Sidebar' 
    }, 
    controller: function ($scope) { 
    $scope.setLayout(); 
    $scope.app.layout.isSidebarFixed = true; 

    $scope.$on('$routeChangeSuccess',function(){ 
     $scope.templateUrl = $route.current.templateUrl; 
    }) 
    } 
}) 
.state('app.pagelayouts.fixedsidebar2', { 
    url: "/fixed-sidebar", 
    templateUrl: "assets/views/page-2.html", 
    resolve: loadSequence('d3', 'ui.knob', 'countTo', 'dashboardCtrl'), 
    title: 'Fixed Sidebar', 
    ncyBreadcrumb: { 
    label: 'Fixed Sidebar' 
    }, 
    controller: function($scope) { 
    $scope.setLayout(); 
    $scope.app.layout.isSidebarFixed = true; 
    } 
}). 

Seite-3.html, Seite-4.html und so weiter .. ..

Angenommen, ich bin in page-1.html, wenn ich es aktualisiere, bleibt es nicht in page-1. Geht zu einer anderen Seite. Aber es sollte auf Seite-1.html bleiben. Die templateUrl ändert sich.

Wie kann ich es beheben?

Answer 1

Ein offensichtliches Problem ist, dass Sie die gleichen url für alle Routen haben. Sie sollten es mit einem Parameter aktualisieren, der die zu ladende Vorlage angibt. Wenn die Seite aktualisiert wird, weiß der UI-Router anhand der URL, welcher Status aktiviert werden soll. Zum Beispiel:

state('app.pagelayouts.fixedsidebar1', { 
    url: "/fixed-sidebar/1", 
    templateUrl: "assets/views/page-1.html", 
    resolve: loadSequence('d3', 'ui.knob', 'countTo', 'dashboardCtrl'), 
    title: 'Fixed Sidebar', 
    ncyBreadcrumb: { 
    label: 'Fixed Sidebar' 
    }, 
    controller: function($scope) { 
    $scope.setLayout(); 
    $scope.app.layout.isSidebarFixed = true; 
    } 
}); 

Wenn alle Ihre Routen ähnlich sind, können Sie eine einzelne Route mit einem param wie erstellen:

state('app.pagelayouts.fixedsidebar', { 
    url: "/fixed-sidebar/:id", 
    templateUrl: function($stateParams) { 
    return "assets/views/page-" + $stateParams.id + ".html"; 
    }, 
    resolve: loadSequence('d3', 'ui.knob', 'countTo', 'dashboardCtrl'), 
    title: 'Fixed Sidebar', 
    ncyBreadcrumb: { 
    label: 'Fixed Sidebar' 
    }, 
    controller: function($scope) { 
    $scope.setLayout(); 
    $scope.app.layout.isSidebarFixed = true; 
    } 
});