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

Question

我一直在使用AngularJS瓦特/ UI路由器在过去几个月，我一直在遇到相同的用例，我似乎无法找到一个优雅的解决方案......我有一个循序渐进的网络规划应用程序用户必须通过完成订单。

我有一个根控制器住在ui路由器作用域之外（根控制器没有'状态'），我一直试图在我的web规划器中保存每个页面全局的一些数据。这些信息就像客户信息和订单名称一样，将在整个过程中显示在计划者的顶部和底部。

我的问题是，为了将这些数据导入到一个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'服务。我还没有在小提琴或任何东西中测试过这些，但这个想法应该能让你走上正轨。