在AngularJS中刷新或重新加载页面时，templateUrl会发生更改

Question

我正在使用角度包模板。这里加载了11个页面和11个不同的按钮，如下所示：

这是路线代码：

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;
  }
}).

page-3.html，page-4.html等......

假设我在页面1.html中，当我刷新它不会留在第1页。转到另一页。但它应该留在page-1.html。 templateUrl正在发生变化。

我该如何解决？

Answer 1

一个明显的问题是，您对所有路线都有相同的url。 您应该使用指示要加载的模板的参数来更新它，以便在刷新页面时，UI路由器根据URL知道要激活的状态。例如：

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;
  }
});

如果您的所有路线都相似，您可以使用以下参数创建单个路线：

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;
  }
});