UI роутер меняет templateUrl по клику

0

Я пытаюсь создать динамический UI-маршрутизатор, когда каждый раз, когда вы нажимаете кнопку, ему нужно вернуть templateUrl с изменением $ stateParams.currentFloor, чтобы он мог обновляться в представлении на экране.

В настоящее время у меня есть:

Моя настройка:

app.config(function ($urlRouterProvider, $stateProvider) {

    $urlRouterProvider.otherwise('/');

    $stateProvider
        .state('home', {
            url: '/',
            views: {
                "menu-view": {
                    templateUrl: 'partials/menu.html'
                },
                "map-view": {
                    controller: 'mapViewController',
                    templateUrl: function ($stateParams) {
                        return 'partials/floors/floor-' +  $stateParams.currentFloor + '.html'
                    }
                }
            }
        })
});

Мой контроллер, который должен хранить данные и передавать их в функции templateUrl

app.controller('mapViewController', function ($scope, $stateParams) {
    $scope.currentFloor = $stateParams.currentFloor;
    $scope.currentFloor = 1;
    $scope.addOne = function () {
        $scope.currentFloor = $scope.currentFloor + 1;
        return $stateParams.currentFloor = $scope.currentFloor;
    };
});

И просто простая функция, которая добавляет +1 в область каждый раз щелчком

<button ng-click="addOne()"></button>

Я думаю, что я довольно близко, но мне сложно передать данные с моего контроллера на функцию, которая должна изменить templateUrl

  • 0
    Можете ли вы сделать поршень, пожалуйста? Вам нужно будет перезагрузить состояние после изменения параметров состояния
  • 0
    plnkr.co/edit/1xaMwcoyfAlz4zcE96TO?p=preview не может даже заставить плунжера приступить к работе. Я думаю, что это что-то с состоянием #
Показать ещё 5 комментариев
Теги:
angular-ui-router

2 ответа

2
Лучший ответ

Проверьте обновленный плункер здесь

Одно из возможных решений:

 var app = angular.module('testTool', ['ui.router'])

  .config(function($urlRouterProvider, $stateProvider) {

     $urlRouterProvider.otherwise('/1');

     $stateProvider
        .state('home', {
            url: '/:currentFloor',
            views: {
                "menu-view": {
                 templateUrl: 'menu.html'
                 },
            "map-view": {
                templateUrl: function ($stateParams) {
                          return 'floor-' +  $stateParams.currentFloor + '.html'
                },
            controller: 'mapViewController'
         }, 
       }
      })
  })

  .controller('mapViewController', function($scope, $stateParams, $state) {

      $scope.addOne = function() {

          $state.go('home', {currentFloor : parseInt($stateParams.currentFloor) + 1}, {reload: true})

      };
  });

Добавьте param 'currentFloor в url params (url:'/:currentFloor'). Затем перезагрузите состояние с помощью этих параметров: $state.go('home', {currentFloor: 2}, {reload: true})

Опция reload:true для маршрутизатора ui перезагружает состояние, когда вы находитесь в одном состоянии.

Я предлагаю вам использовать функцию разрешения, если вам нужно выполнить некоторую работу между $ stateParams и объектом в вашей области.

  • 0
    Вау, впечатляющие вещи, большое спасибо, это именно то, чего я хочу достичь!
0

Попытайтесь добавить $state.go($state.current, {}, {reload: true}) после изменения $ stateParams.

  • 0
    Нет, не работает, я даже не могу получить все данные, которые находятся внутри # $ scope в функции templateUrl
  • 0
    и если вы передадите такие параметры, как $state.go($state.current, {yourParam: yourData }, {reload: true})

Ещё вопросы

Сообщество Overcoder
Наверх
Меню