AngularJS UI-Router導航到子URL

Question

嘗試使用Angular UI-Router鏈接到子URL（這是新功能）

我有：-

app.config(function($stateProvider, $urlRouterProvider, $locationProvider){
  $urlRouterProvider.otherwise("/products")

  $stateProvider
    .state('products', {
        url: "/products",
        templateUrl: "products.html",
    })
    .state('products.edit', {
        url: "/:id",
        templateUrl: "products.edit.html",
        controller: function ($scope, $stateParams) {
          $scope.id = $stateParams.id;
          console.log($stateParams.id)
        }
    })    
    .state('customers', {
        url: "/customers",
        templateUrl: "customers.html",
    });     
    //$locationProvider.html5Mode(true);         
});

我可以導航到產品和客戶，但不能導航到products.edit狀態。

這是一個PLUNKER

Answer 1

由於products.edit是的子狀態products ，前者的觀點是被嵌入到后者的觀點。 因此，在products.html ，您需要包括<ui-view> ，其中ui-router將放置子視圖。 像這樣：

<div>
 <h4>Products Page</h4>
 <ui-view></ui-view>
</div>

請參閱此更新的插件 。