Question

过去几个月我一直在使用带有UI-Router的AngularJS，而且我一直在使用相同的用例，我似乎找不到优雅的解决方案......我有一个循序渐进的网络规划器用户必须运行的应用程序才能完成订单。

我有一个根控制器，它位于ui-router范围之外（根控制器没有“状态”），我一直试图在我的网络规划器中保存一些全局数据。此信息类似于客户信息和订单名称，将在整个过程中显示在计划员的顶部和底部。

我的问题是，为了将这些数据放入Angular服务中，以便可以在我的控制器之间共享，我需要订单的OrderId。这个OrderId存在于URL $ stateParams中，但问题是我的'root'控制器在ui-router参与之前被实例化，这意味着我无法从该控制器内部访问我的$ stateParams。

我已经使用Angular的$broadcast信号来告诉我的根控制器它最终在url中找到了OrderId，但是这个解决方案感觉不对“正确”。有没有人知道处理“全局”信息的更好方法，而无需在我的应用程序的每个控制器中向我的服务添加查询？

// This is the root of my web app
<div ng-app="MyApp.backups.new" ng-controller="NewController">

    // This is where I need to display some "global" information
    <h2 class="dashTitle"><sk-img class="iBackup-Add"></sk-img> New Backup {{ (Master.Service.Name ? '- ' + Master.Service.Name : '') }}</h2>
    <div id="wpMenuContainer" class="wpMenuContainer">
        <ul class="wpMenu clearfix">
            <li ng-repeat="chevron in Chevrons | filter:{disabled:false}" ng-class="{ active : chevron.active, navable : $index < Index }" class="backupChevron" ng-click="!($index < Index)||navigate(chevron, $index)">
                <img ng-if="!$last" src="/App_Themes/App/images/misc/clear.gif" class="iMenuArrow">
                <span>{{ chevron.name }}</span>
            </li>

          </ul>
    </div>
    // The problem is ui-router's scope lives within this <div ui-view></div>, so I can't access $stateParams until these child controllers are created
    <div ui-view></div>

</div>

Answer 1

您是否尝试过利用UI路由器的state change events？

// custom factory for setting/getting current state params
app.factory('customFactory', function(){
  var currentParams = null;

  return {
    getParams: function(){ return currentParams; },
    setParams: function(params){ currentParams = params; }
  };

});

// your controller
app.controller('NewController', ['customFactory', function(customFactory){
  var routeParams = function(){ 
    return customFactory.getParams() || {};
  };

  $scope.orderID = routeParams().OrderId;
}]);

// set listener on the '$stateChangeSuccess' event to update the params in your factory
app.run(['$rootScope', 'customFactory', function($rootScope, customFactory){

  $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
    customFactory.setParams(toParams);
  });

}]);

这样，您只需要在'app.run'和那个1控制器中引用'customFactory'服务。我没有用小提琴或任何东西来测试这些，但这个想法应该让你走上正轨。

在根（父）控制器上使用$ stateParams？

1 个答案: