angular ui-router $ stateProvider states迭代对象属性

时间:2016-11-24 15:58:10

标签: javascript angularjs angular-ui-router state

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

为了清楚起见,让我们使用波纹管状态,我需要能够使用状态名称(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 ----   ')
    });
}

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

$state.get()for ... in warnings时返回array

您应该使用iterates over properties in object代替:

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