无法使用UI路由器

Question

状态和共享数据之间的扭打起来，我使用这样

$stateProvider 
     .state('/', { 
      url: '/Home', 
      templateUrl: 'Home.html', 
      controller: 'ctrl' 
     }) 
.state('category', { 
      url: '/category', 
      templateUrl: 'category.html',        
      controller: 'ctrl' 
     }) 
     .state('Item', { 
      url: '/Item', 
      templateUrl: 'Item.html', 
      controller: 'itm' 
     }) 

目前我使用$我rootScope.category = [];以显示category.is有任何其他方式来做到这一点。

我想加载类与ng-init在主页状态和类别点击我想加载项目与类别id.How我可以做到这一点。去这样做这种嵌套鉴于

Answer 1

Plunkr https://plnkr.co/edit/A8JXIWa6Jc4RxsGvucFa?p=preview

最好的办法是与孩子的状态和解决块。

 .state('app', { 
      url: '', 
      template: '<div ui-view></div>', 
      controller: 'AppCtrl', 
      abstract: true 
     }) 

我的例子中的主状态'app'是一个抽象的状态。抽象状态可以有子状态，但不能直接访问。如果我们在应用程序中使用'app.'前缀中的所有状态，它们将成为应用程序状态的子项，并将继承应用程序状态的范围。注意如何在类别控制器中使用$scope.goHome()，即使它是在应用程序控制器中定义的。

 .state('app.home', { 
      url: '/home/', 
      templateUrl: 'app.home.html', 
      controller: 'HomeCtrl', 
      resolve: { 
       Categories: function (CategoryService) { 
        return CategoryService.getAll(); 
       } 
      } 
     }) 
     .state('app.category', { 
      url: 'category/:categoryId/', 
      templateUrl: 'app.category.html', 
      controller: 'CategoryCtrl', 
      resolve: { 
       Category: function ($stateParams, CategoryService) { 
        return CategoryService.getById(+$stateParams.categoryId); 
       }, 
       Items: function ($stateParams, ItemService) { 
        return ItemService.getByCategoryId(+$stateParams.categoryId); 
       } 
      } 
     }); 

在例如下面两个状态，'app.home'和'app.category'是最相关的你的问题的人。请注意我是如何解决我们需要的，以便在进入状态之前填充视图。此功能发生在解析块中，我们在状态中解析的所有变量都可以直接在状态控制器（以及所有儿童的控制器）中或连续的解析语句中访问。

为了抽象出可重用的功能，我创建了一个我在解析块中使用的ItemService和CategoryService。它们相对简单，可以在plunkr中看到。两个重要功能是CategoryService.getById和ItemService.getByCategoryId。这两个参数都采用相同的参数categoryId，我从状态的$stateParams中检索该参数，这些参数被传递到$state.go函数中，作为HomeCtrl控制器中的第二个参数。这些参数包含在状态的url中。

.controller('AppCtrl', function ($scope, $state) { 
    $scope.goHome = function() { 
     $state.go('app.home'); 
    } 
}) 
.controller('HomeCtrl', function ($scope, $state, Categories) { 
    $scope.Categories = Categories; 

    $scope.goCategory = function (category) { 
     $state.go('app.category', {categoryId: category.id}); 
    }; 
}) 
.controller('CategoryCtrl', function ($scope, Category, Items) { 
    $scope.Category = Category; 
    $scope.Items = Items; 
}); 

这里的控制器也比较简单。已解决的变量被注入控制器（并且必须命名相同）。然后将它们分配给范围，以便可以在模板中访问它们。

我继续为类别和项目创建模型，将其作为不必要的但有用的抽象。在国家管理方面它们是不必要的。

希望这个例子足以让你开始使用ui-router中的嵌套状态。