在“根”或全局控制器中使用 $stateParams答案

【问题标题】：Using $stateParams in a "root" or global controller在“根”或全局控制器中使用 $stateParams
【发布时间】：2014-09-22 19:37:31
【问题描述】：

我正在创建一个 AngularJS 应用程序，它是一个由 6 个步骤组成的网络规划器。每个步骤都有自己的视图和自己的控制器。有一些数据应该可以从所有州访问（计划者的标题/标题中使用了订单级别信息）。我已将此信息放入服务中，但问题出在此根控制器中，它无法访问 $stateParams，这是我知道是否需要获取 API 数据的方式。

当 ui.router 运行并在 URL 中找到 ID 时，我可以使用 $scope.$emit() 或 $scope.$broadcast 告诉我的根控制器，但这似乎是糟糕的设计。使$stateParams 可用于全局控制器的最佳方法是什么？

这是 HTML 的样子。

<div ng-app="MyApp.SubModule.Module" ng-controller="RootController">

    <sk-overlay ng-show="overlayVisible"></sk-overlay>



    <h2 class="dashTitle"> {{ (Order.CustomerInfo.CompanyName ? '- ' + Order.CustomerInfo.CompanyName : '') }}</h2>
    <div id="wpMenuContainer" class="wpMenuContainer">
        <ul class="wpMenu clearfix">
            <li ng-repeat="chevron in Chevrons" ng-class="{ active : chevron.active, navable : $index < Index }" ng-click="!($index < Index)||navigate(chevron, $index)">

                <span>{{ chevron.name }}</span>
            </li>

          </ul>
    </div>





    <div ui-view class="do"></div>




</div>

我希望 RootController 用于控制整个应用程序的全局数据，但 $stateProvider 中不存在该状态，因此它无法访问 $stateParams 变量。

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案1】：

您始终可以使用共享的service（我想我实际上是指factory）来启用不同控制器之间的双向通信。
这是一个热门话题，并且有很多相关问题：

更新
实际上，您可以通过将其分配给 $rootScope 来使该工厂成为全局的，因此无需在每个控制器中分配它即可观察它：

angular.module('app')
    .factory('sharedData', function() {
        return {};
    })
    .controller('mainController', function($rootScope, sharedData) {
        $rootScope.sharedData = sharedData;
        $rootScope.$watch('sharedData', updateMyStuff, true);
    })
    .controller('subController', function(sharedData) {
        sharedData.stateParams = 'inaccessible stuff';
    });

【讨论】：

如果您阅读我的帖子，我声明我正在使用一项服务。但我不想在每个控制器中分配订单信息，即使它只需要在一个地方。应该有一个解决方案，只需要一个$scope.Order = OrderService，然后就不需要了。
我明白你的意思，但这仍然需要我在每个控制器中设置共享数据，因为用户可以在任何给定时间访问规划器的任何页面。

【解决方案2】：

$stateParams 可以使用 DI 注入到您的任何控制器/服务/指令中，它是由 ui-router 提供的服务。

$state 也可以使用 DI 注入到您的任何控制器/服务/指令中，它是由 ui-router 提供的服务。你可以通过$state通过$state.params访问stateParams

另外，ui-router mentions that it is handy 设置$state in $rootScope on run() 以便它可以主要在模板中访问。

【讨论】：