无法使用UI路由器
状态和共享数据之间的扭打起来,我使用这样无法使用UI路由器
$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我可以做到这一点。去这样做这种嵌套鉴于
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中的嵌套状态。
我也可以使用相同的控制器,或者有必要使用不同的控制器。 – user123
如果您使用ui-router中的解决方案块,则需要使用不同的控制器,因为您正在向每个状态注入不同的数据。 –