Question

在下面的示例中，我有data:{roles:[]}这样的自定义数据，我需要为每个州动态添加自定义数据属性，如data:{user:[]}

 .state('WorkArea', {
   parent: 'site',
   url: '/WorkArea',
   data: {
       roles: ['User', 'Dev']
   },
 })

Answer 1

Define it in this way:

 .state('WorkArea', {
   parent: 'site',
   url: '/WorkArea',
   data: {
       roles: (function() {
                return ['User', 'Dev'];
              })()
   },
 })

您可以在这种情况下使用IIFE动态地向数据属性添加属性。

在app.run中使用：

$rootScope.$on('$stateChangeStart', function(event, toState){ 
    var roles = toState.data.roles ;
    console.log(roles);
   // your custom logic here for that state
})

Answer 2

复制自：https://github.com/angular-ui/ui-router/wiki 您可以将自定义数据附加到状态对象（我们建议使用数据属性以避免冲突）。

// 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";
}

如何动态地向每个状态对象添加自定义数据

2 个答案: