angularjs - 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>

请参阅此更新的 plunker。