angular-ui-router - AngularJS UI Router 抽象状态

  显示原文与译文双语对照的内容
112 2

我最近从ngRoute迁移到用户界面路由器。我有一页有 2节。

右部分显示当前项的详细信息,左部分显示与当前项相似的项。

一旦用户单击左列表中类似的项目,右部分将重新加载单击项with和左部分保持相同。

为了保持左部分仍然在用户项导航上导航,我将左节定义为抽象状态,右部分为子状态。( 如果你不查找项目,则无法查看类似项目) 。

左部分( listview ) 是父类,包含HTML中的一个用户界面视图以嵌入项详细信息。

若要在页打开时加载类似项,我需要知道子状态正在加载哪个项。但是我不能为抽象状态和它的子状态定义相同的url 。我试图在抽象状态下解析 $stateParams,但没有机会。

我的状态配置如下

app.config(['$stateProvider', function ($stateProvider) {
 $stateProvider
. state('item', {
//url: '/items/:itemName/:itemID'
 url: '/items',
 abstract: true,
 templateUrl: 'Scripts/app/item/ItemListTemplate.html',
 controller: 'ItemListController as itemList'
 }).state('item.itemDetails', {
 url: '/:itemName/:itemID',
 templateUrl: 'Scripts/app/item/ItemDetailTemplate.html',
 controller: 'ItemDetailController as itemDetail'
 });

如何从我的抽象状态( 来自 ItemListController ) 访问 itemID?

时间:原作者:0个回答

94 5

我使用 Angular 作用域变量解决了这个问题。parent包含一个用于显示子状态内容的ui视图。所以子状态和父状态共享相同的范围,因这里我可以以通知父级about和父级可以以更新它的视图。

父状态具有这样的作用域函数

$scope.notifySelectedItem = function(selectedItemID){};

子状态可以从它的作用域调用这里函数

$scope.notifySelectedItem($stateParams.itemID);
原作者:
69 5

我将这里模型建模为具有两个命名视图的单个状态。状态的主题是单个项目和相关数据,因此你的状态可能围绕着。你已经描述了两个视图,其中一个显示了项目细节,另一个显示了其他内容,但是主要主题仍然是项目。

 $stateProvider
. state('item', {
 url: '/item/:itemID',
 views: {
 detail: {
 templateUrl: 'Scripts/app/item/ItemDetailTemplate.html',
 controller: 'ItemDetailController as itemDetail'
 }, related: {
 templateUrl: 'Scripts/app/item/ItemListTemplate.html',
 controller: 'ItemListController as itemList'
 }
 } 
 });

在父视图中,添加两个命名的用户界面视图,其中定义的视图将插入到:

<div ui-view="related"></div>
<div ui-view="detail"></div>

现在,可以使用解析增强这里功能,以便在调用控制器之前预加载数据:

 $stateProvider
. state('item', {
 url: '/item/:itemID',
 resolve: { 
 item: function($http, $stateParams) {
 return $http.get('/item/' + $stateParams.itemID); 
 },
 related: function($http, $stateParams) { 
 return $http.get('/item/' + $stateParams.itemID +"/related");
 },
 },
 views: {
 detail: {
 templateUrl: 'Scripts/app/item/ItemDetailTemplate.html',
 controller: 'ItemDetailController as itemDetail'
 }, related: {
 templateUrl: 'Scripts/app/item/ItemListTemplate.html',
 controller: 'ItemListController as itemList'
 }
 } 
 });
app.controller("ItemListController", function($scope, related) { $scope.related = related.data; });
app.controller("ItemDetailController", function($scope, item) { $scope.item = item.data; });
原作者:
...