state以对象作为参数重定向

时间:2015-05-22 12:10:31

标签: angularjs angular-ui-router

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

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

1 个答案:

答案 0 :(得分:0)

实际上,只使用ui-router即可。看看how to pass parameters without specifying them in the state URLs。您会发现事情很简单,您不需要创建其他服务或将数据附加到$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');
    }
  ]);
&#13;
<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>
&#13;
&#13;
&#13;