angularjs - 如何将自定义数据动态添加到每个状态对象

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