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在Home状态和类别点击中加载类别我想加载类别为id的项目。我怎么能这样做。

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()，即使它是在app控制器中定义的。

        .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'是与您的问题最相关的状态。请注意我是如何解决在进入状态之前填充视图所需的数据。此功能在resolve块中发生，我们在状态中解析的所有变量都可以直接在状态控制器（以及所有子控制器）或连续的resolve语句中访问。

为了抽象出可重用的功能，我创建了一个我在解析块中使用的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中的嵌套状态。

不能在状态之间扭打并使用ui-router共享数据

1 个答案: