角度 ui-router $stateProvider 状态迭代对象属性

Question

我一直在尝试从 $stateProvider 中配置的状态动态填充导航栏。当我尝试获取未定义的状态名称或 url 或任何其他属性时，我一直在使用 $state.get() 但我找不到任何示例来解释如何使用它来遍历状态

为了清楚起见，举个例子让我们使用下面的状态，我需要能够动态生成带有状态名称（main、home、about）的导航栏

$stateProvider
  .state('main', {
    abstract: true,
    templateUrl: 'app/states/main/main.html'
  })
  .state('home', {
    url: '/',
    templateUrl: 'app/states/main/home/home.html',
    controller: 'HomeController',
    controllerAs: 'home'
  })
  .state('about', {
    url: '/about',
    templateUrl: 'app/states/main/about/about.html',
    controller: 'AboutController',
    controllerAs: 'about'
  })

查看控制器的实现可能是无稽之谈

angular
.module('myapp')
.controller('NavBarController', NavBarController); 
function NavBarController($scope, $state) {
   var states = $state.get();
    angular.forEach(states, function (value, key) {
        // value returns [Object Object];
        // key returns numbers from 0 to 3
        console.log('get states ----   ')
    });
}

Answer 1

console.log(state.name) 是否尝试获取每个州的名称以及相应的其他内容？

Answer 2

$state.get() 返回 array 而 for ... in iterates over properties in object。

您应该改用angular.forEach：

// Get all state config objects
var states = $state.get();

// Loops through each state in states
// "value" is each state config object
angular.forEach(states, function(value, key) {
  // Log each state name
  console.log(value.name);
});