Javascript UI路由器更改模板单击URL

我试图创建一个动态用户界面路由器，当你每次点击一个按钮时，它需要返回带有$stateParams.currentFloor更改的templateUrl，这样它才能在屏幕上的视图中得到更新

目前我有：

我的设置：

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的函数中。

尝试添加

$state.go（$state.current，{}，{}，{reload:true}）

在更改$stateParams之后。

检查更新的plunker

一种可能的解决办法：

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

      };
  });

在url参数中添加参数“currentFloor”（url:“/：currentFloor”）。然后使用以下参数重新加载状态：

$state.go（'home'，{currentFloor:2}，{reload:true}）

选项

reload:true

对于ui路由器在相同状态下重新加载状态非常重要

---

如果需要在$stateParams和作用域中的对象之间做一些工作，我建议您使用resolve函数。

您能做一个plunker吗？您需要在更改状态参数后重新加载状态。这些参数甚至无法使plunker开始工作。我认为这是与“你与angular 2合作的状态”有关？哦，伙计们，我甚至没看到我加入了angular 2。我现在改的不好我成功了我会写一个答案不行，我甚至无法在templateUrl函数中获得#$范围内的所有数据如果你像这样传递参数

$state.go（$state.current，{yourParam:yourData}，{reload:true}）

哇，令人印象深刻的东西，非常感谢，这正是我想要实现的！