Question

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

当ui.router运行时，我可以使用$scope.$emit()或$scope.$broadcast告诉我的根控制器，并在URL中找到ID，但这看起来好像是糟糕的设计。使$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个变量。

Answer 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';
    });

Answer 2

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

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

通过$state.params访问stateParams

此外，ui-router mentions that it is handy可以在run()上的$state设置$rootScope，以便主要在模板中进行访问。

在＆＃34; root＆＃34;中使用$ stateParams或全局控制器

2 个答案: