Angular UI路由器：僅繼承URL（使用parent.child狀態），但不嵌套視圖

我想在UI路由器中使用parent.child表示法繼承狀態/ URL。我不想繼承視圖（或在其他視圖內嵌套視圖），或繼承控制器，我只想繼承URL。我使用'ui.router'作爲依賴項。Angular UI路由器：僅繼承URL（使用parent.child狀態），但不嵌套視圖

這是路由器的一個例子：

$stateProvider 
.state('products', { 
    url: '/products', 
    templateUrl: 'view1.html', 
    controller: 'products#index' 
}) 

.state('products.show', { 
    url: '/:id',   
    templateUrl: 'view2.html', 
    controller: 'products#show' 
}) 

.state('products.buy', { 
    url: '/:id/:moreParams', 
    templateUrl: 'view3.html', 
    controller: 'products#buy' 
}) 

.state('products.sell', { 
    url: '/:id/:moreParams/:moreParams', 
    templateUrl: 'view4.html', 
    controller: 'products#sell' 
});

和控制器是：

angular.module('productsModule', []) 

.controller('products#index', function($scope){ 
}) 
.controller('products#show', function($scope){ 
}) 
.controller('products#buy', function($scope){ 
}) 
.controller('products#sell', function($scope){ 
})

在這裏，所有的觀點是完全不同的，我不希望任何嵌套視圖內任何其他觀點。而且，所有的控制器也不同，我不想繼承控制器，它們都是獨立的，具有不同的功能。

這是我的預期結果。我想實現的是角，讓我只繼承網址，因此網址變爲：

/products 
/products/:id 
/products/:id/:moreParams 
/products/:id/:moreParams/:moreParams

（然後讓每個URL自己的視圖和控制器，如上所述）

到目前爲止，它是不工作，我的研究開始告訴我，這種使用parentState.childState的繼承只適用於想要嵌套視圖（這是我不想要的，我只想重新使用URL）。

我的解決方法是創建像products_show這樣的路由器URL，即使用下劃線而不是點，所以它們被視爲新的獨立URL而不是繼承。我不確定這是否是最好的主意，主要是因爲它看起來很醜（儘管它完美地起作用）。

也許我應該只使用products_show萬一不能用點來完成？想法？

來源

2016-05-20 Felo Vilches

我不知道你在更多參數/產品/意思：ID /：更多參數 /產品/ ：id /：moreParams /：moreParams – MayK

moreParams可能是任何東西，它只是使一個URL不同。它可能只是網址：'/：id/different/URL'， –

-1

這是怎麼寫的嵌套狀態：

$stateProvider 
.state('products', { 
    url: '/products', 
    templateUrl: 'view1.html', 
    controller: 'products#index' 
}) 

.state('products.show', { 
    parent:'products', 
    url: '/:id',   
    templateUrl: 'view2.html', 
    controller: 'products#show' 
})

來源

2016-05-20 20:26:26 MayK

您可以路線之間的父子關係沒有嵌套各自的看法。您通過爲視圖指定絕對目標來實現這一目標。就像這樣：

$stateProvider 
.state('products', { 
    url: '/products', 
    templateUrl: 'view1.html', 
    controller: 'products#index' 
}) 

.state('products.show', { 
    url: '/:id', 
    views: {'@': { 
     templateUrl: 'view2.html', 
     controller: 'products#show' 
    }} 
}) 

.state('products.buy', { 
    url: '/:id/:moreParams', 
    views: {'@': { 
     templateUrl: 'view3.html', 
     controller: 'products#buy' 
    }} 
}) 

.state('products.sell', { 
    url: '/:id/:moreParams/:moreParams', 
    views: {'@': { 
     templateUrl: 'view4.html', 
     controller: 'products#sell' 
    }} 
});

通過這樣做，你基本上是告訴UI路由器呈現無名ui-view內部視圖在主的index.html，因此，重寫父視圖。而不是在父視圖的模板中查找ui-view。

爲了理解這個工作原理，您必須瞭解ui路由器如何決定爲路由呈現視圖的位置。因此，舉例來說，當你這樣做：

.state('parent.child', { 
    url: '/:id', 
    templateUrl: 'child-view.html', 
    controller: 'ChildCtrl' 
})

UI路由器在默認情況下此轉化爲類似：

.state('parent.child', { 
    url: '/:id', 
    views: {'@parent': { 
     templateUrl: 'child-view.html', 
     controller: 'ChildCtrl' 
    }} 
})

這將導致它來尋找裏面的父母的一位不願透露姓名的用戶界面視圖查看模板並在裏面渲染子視圖的模板。你也可以指定1個多視圖的路徑，如：

.state('parent.child', { 
    url: '/:id', 
    views: { 
     '@parent': { 
     templateUrl: 'child-view.html', 
     controller: 'ChildCtrl' 
     }, 
     '[email protected]': { 
     templateUrl: 'child-view-sidebar.html', 
     controller: 'ChildViewSidebarCtrl' 
     } 
    } 
})

在這種情況下，child-view.html將裏面的父視圖的無名ui-view像以前那樣呈現。此外，它還將在父視圖的模板中查找ui-view="sidebar"，並在內部呈現child-view-sidebar.html。

有關這個強大的views選項的詳細信息，以及如何爲您的視圖指定目標，請參閱ui-router docs

來源

2016-05-20 20:41:27

感謝@joel kornbluh。這個對我有用。 –

Angular UI路由器：僅繼承URL（使用parent.child狀態），但不嵌套視圖

回答

相關問題