無法使用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中的嵌套狀態。