javascript - UI 路由器单击时更改 templateUrl

Question

我尝试创建一个动态 UI 路由器，每次单击按钮时，它都需要返回 templateUrl 并更改 $stateParams.currentFloor，以便它可以在屏幕 View 中更新。

目前我有:

我的设置:

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

我的 Controller 需要保存数据并将其传递到 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>

我认为我已经非常接近了，但是我很难将数据从 Controller 传递到需要更改 templateUrl 的函数

Answer 1

检查更新后的插件 here

一种可能的解决方案:

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

      };
  });

在网址参数中添加参数“currentFloor”(url:'/:currentFloor')。然后使用以下参数重新加载状态: $state.go('home', {currentFloor : 2}, {reload: true})

选项reload:true对于当你处于相同状态时ui路由器重新加载状态很重要。

如果您需要在 $stateParams 和范围内的对象之间进行一些工作，我建议您使用解析函数。