Я пытаюсь создать динамический 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
Проверьте обновленный плункер здесь
Одно из возможных решений:
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 и объектом в вашей области.
Попытайтесь добавить $state.go($state.current, {}, {reload: true})
после изменения $ stateParams.
$state.go($state.current, {yourParam: yourData }, {reload: true})