Angular ui-router：从服务加载数据和参数的值

Question

我想加载data和params每个状态时，一次从我的服务的应用程序加载settings （此服务的回报也promise ，因为数据的异步加载）。
像这样的东西：

  .state('tutorials', {
    url: '/tutorials',
    templateUrl: 'partials/tutorials.html',
    controller: 'TutorialsCtrl',
    data: {details: false},  // instead of false I want: settings.get('tutorials_data_details')
    params: {popular: '512'} // instead of '512' I want: settings.get('tutorials_params_popular')
  })

在进入任何状态之前，必须为所有状态加载这些params因为它们用于构建与ui-sref指令的链接，该指令可以放置在指向任何状态的任何html （并且将使用这些默认params ）。

问题是我无法将service注入config功能。 并且使用resolve不会立即处理所有状态。

我认为$stateProvider.decorator可以使用，但我不知道如何。

Answer 1

我会评论，但没有足够的声誉。

如果可能，一个选项是创建一个父抽象状态，如app ，所以你的状态树将成为app.tutorials然后你可以在app状态上使用resolve ，允许所有子状态使用data / params。

这样的事情：

.state('app', {
url: '',
abstract: true,
templateUrl: 'partials/tutorials.html',
controller: 'AppCtrl',
resolve: { <resolve your dependencies here> }
})

.state('app.tutorials', {
    url: '/tutorials',
    templateUrl: 'partials/tutorials.html',
    controller: 'TutorialsCtrl'
})

请注意，在完成解析之前，Tutorials状态将不会加载。

Answer 2

经过一些研究和思考，我想出了这三种可能的解决方案：

1）通过使用decorator我们使所有状态解析settings服务。

.decorator('data', function(state, parent) {
  state.resolve.SettingsLoaded = ['settings', function(settings) { return settings.$promise; }];
  return parent(state);
})

然后在settings服务中使用加载成功回调来设置状态。 您可以使用$state.get()来获取所有状态（或使用string参数按名称获取特定状态）并修改params对象。
请注意 ，您不能使用像state.params.popular = '512'这样的短版本，而是使用完整版本： state.params.popular.value = '512' 。

2）这些params实际上可以是注入和调用的函数，并且将使用结果值。 所以该state的新params定义将是：

params: {popular: ['settings', function(settings) { return settings.get('tutorials_params_popular') || '512'; }]}

此外，我再次使用相同的decorator ，以确保在加载任何状态之前解析settings 。
我最喜欢这种方法，因为所有参数值都保留在settings服务中，并且动态反映了变化。

3）由于我使用的是RequireJS ，我可以使用它加载设置，然后将其注入路由器文件。 但是，这需要对我的settings服务中的现有代码进行更多更改...