更改帶有嵌套視圖的狀態和頁面加載時的默認嵌套狀態

Question

我有一個帶有嵌套ui視圖的Angular應用程序。 在主頁上，我有一個子菜單，其中包含兩個呈現在主頁上的鏈接。 我有顯示列表的Menu1，並希望該列表在頁面加載時顯示為默認列表。 我也有Menu2，一旦單擊它就會顯示不同的列表，但它不是默認視圖。

我已經使嵌套視圖在出現錯誤時可以稍微工作。 我只能在加載時更改為一種狀態，而不能來回更改狀態。 單擊其中一個嵌套視圖后，出現404錯誤，另一個返回404錯誤。

另外，如何將嵌套視圖渲染為加載時的默認視圖？ 就像我想讓menu1在加載主頁面時默認顯示在ui視圖中一樣。

app.js

$stateProvider
  .state('/', {
    url: '/index',
    templateUrl: '/index',
    controller: 'indexCtrl'
  })
  .state('/main', {
    url: '/main',
    templateUrl: 'main',
    controller:   'mainCtrl'
  })
  .state('/main.menu1', {
    url: '/menu1',
    templateUrl: "menu1",
    controller: 'menu1Ctrl'
  })
  .state('/main.menu2', {
    url: '/menu2',
    templateUrl: "menu2",
    controller: 'menu2Ctrl'
  });

控制器

app.controller('menu1Ctrl', ['$scope', function($scope) {
    $scope.livenow = [
    { name: 'user1',
    status: 'online'
    },
    { name: 'user2',
    status: 'online'
    },
    { name: 'user3',
    status: 'online'
    },
    { name: 'user4',
    status: 'online'
    },
    { name: 'user5',
    status: 'online'
    }
    ];
}]);
app.controller('menu2Ctrl', ['$scope', function($scope) {
$scope.livenow = [
{ name: 'user6',
    status: 'offline'
    },
    { name: 'user7',
    status: 'online'
    },
    { name: 'user8',
    status: 'offline'
    },
    { name: 'user9',
    status: 'online'
    },
    { name: 'user10',
    status: 'offline'
    }
    ];
}]);

main.html中

<div class="section2 col-md-12">
    <div class="row">
        <div class="section2nav col-md-offset-4 col-md-4">
            <a ui-sref='/main.menu1'> menu1 </a> | <a ui-sref="/main.menu2"> menu2 </a>
            <ui-view></ui-view>
        </div>
    </div>

Answer 1

您要在每個狀態下刪除斜杠。 例如，

.state('/main', {應該是.state('main', {