以object为参数的状态重定向



我正在寻找一种在状态之间重定向并将对象作为参数的方法。我考虑过使用stateParam,但是这个参数太长太复杂了。

我的第一个选择是使用rootScope作为交易媒介,并使用state.go()重定向,但我想知道是否有其他方法可以做到这一点。

实际上,这是可能的只用ui-router。看看如何在不指定状态url的情况下传递参数。您将看到事情很简单,您不需要创建额外的服务或将数据附加到$rootScope

下面是一个工作示例:

angular
  .module('myApp', ['ui.router'])
  .config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {
      $stateProvider
        .state('stateA', {
          url: '/stateA',
          params: {
            paramAsObject: null
          },
          controller: ['$scope', '$stateParams',
            function($scope, $stateParams) {
              $scope.myObject = {
                name: 'myName',
                nested: {
                  name: 'I am nested',
                  numeric: 123
                }
              };
              console.log($stateParams);
            }
          ],
          template: '<div><h1>Hello from stateA</h1><p>Check the console logs! <a ui-sref="stateB({paramAsObject:myObject})">Go to stateB</a></p></div>'
        })
        .state('stateB', {
          url: '/stateB',
          params: {
            paramAsObject: null
          },
          controller: ['$stateParams',
            function($stateParams) {
              console.log($stateParams);
            }
          ],
          template: '<div><h1>Hello from stateB</h1><p>Check the console logs!</p></div>'
        });
      $urlRouterProvider.otherwise('/stateA');
    }
  ]);
<div ng-app="myApp">
  <div ui-view></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>

最新更新