角度ui路由器$ stateProvider聲明對象屬性的迭代

Question

我一直在嘗試從$ stateProvider中配置的狀態動態填充導航欄。 當我嘗試獲取狀態名稱或url或其他未定義的屬性時，我一直在使用$ state.get（），但是找不到任何示例來說明如何使用它來遍歷狀態

只是為了清楚起見，下面是一個使用波紋管狀態的示例，我需要能夠動態生成帶有狀態名稱（主，家，關於）的導航欄

$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()返回一個數組，而for ... in 在對象的屬性上進行迭代 。

您應該改為使用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);
});