angularjs - 各状態オブジェクトにカスタム データを動的に追加する方法

Question

以下の例では、このようなカスタム データがあり、各状態のdata:{roles:[]}ようにカスタム データ プロパティを動的に追加する必要があります。data:{user:[]}

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

Answer 1

コピー元: 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";
}

Answer 2

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
})