访问自定义数据中的参数

Question

我正在使用自定义数据为我的状态添加一个人类可读的名称，如下所示：

.state('data', {
  parent: 'week',
  url: '/data',
  displayName: 'Data Overview',

然后我可以像这样在模板中使用它：

<h1>Showing {{$state.current.displayName}}</h1>

这很好。但现在我想创建一个带参数的路由，并在 displayName 中使用该参数：

.state('upload', {
  parent: 'week',
  url: '/upload/:level',
  displayName: 'Data Upload for ' + level,
  ...

但我无法找出正确的语法来使用访问 displayName 内的 level 的值。

Answer 1

static 数据（建议放在 data : {} 内部 - 不要直接放在根状态设置上） - 是 静态 数据。所以：

有 NO 方式来动态设置这些数据。例如。基于$stateParams。这些设置应在.config() 阶段定义，而不是在.run() 评估（与其他类似resolve、templateUrl...相比）

查看文档：

Attach Custom Data to State Objects

您可以将自定义数据附加到状态对象（我们建议使用 数据属性以避免冲突）。

// Example shows an object-based state and a string-based state
var contacts = { 
    name: 'contacts',
    templateUrl: 'contacts.html',
    data: {
        customData1: 5,
        customData2: "blue"
    }  
}
$stateProvider
  .state(contacts)
  .state('contacts.list', {
    templateUrl: 'contacts.list.html',
    data: {
        customData1: 44,
        customData2: "red"
    } 
  })

使用上面的示例状态，您可以像这样访问数据：

function Ctrl($state){
    console.log($state.current.data.customData1) // outputs 5;
    console.log($state.current.data.customData2) // outputs "blue";
}