templateUrl изменяется при обновлении или перезагрузке страницы в AngularJS

Я использую шаблон углового пакета. Здесь загружено 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, страница-4.html и так далее.

Предположим, я нахожусь на странице 1.html, когда я обновляю его, не остается в page-1. Переходит на другую страницу. Но стоит остановиться на странице-1.формат html. То templateUrlменяется.

Как это исправить ?

1 ответ

  1. Одна очевидная проблема заключается в том, что у вас есть то же urlсамое для всех маршрутов.
    Вы должны обновить его с параметром, указывающим шаблон для загрузки, чтобы при обновлении страницы маршрутизатор пользовательского интерфейса знал, какое состояние активировать на основе 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;
      }
    });
    

    Если все ваши маршруты похожи, вы можете создать один маршрут с param, как:

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