Nest URIs但不是控制器或AngularUI中的視圖路由器

使用AngularUI Router我想嵌套一些URI，但不是它們的視圖或控制器操作。Nest URIs但不是控制器或AngularUI中的視圖路由器

例如，我想這些URI：

/things - 列出最近的事情。
/things/:x - 顯示編號爲x的東西的詳細信息。

如果我使用"Nested States & Views" from the wiki那麼我必須實際嵌套「事物列表」和「顯示單個事物」視圖，這些視圖碰巧是不相關的。而且，「顯示單一事物」範圍將具有「事物清單」，即使它不需要它們。

如果我使用"Nested States & Views" from the README，那麼我已經有一個單獨的/things/list URI而不是像我想要的普通舊/things。

看來我想要一個單獨的「列表」（或「索引」）狀態，該狀態可以解析爲其他嵌套狀態的基本URL，但不會將視圖和操作傳遞給子狀態。這可能嗎？

2014-10-22 maerics

不完全確定你的問題是什麼意思......我做了一個我認爲你在尋找的例子... http://plnkr.co/edit/bReixgw99JJmqtR49yrm?p=preview這是你有什麼心裏？這裏是一個更好的演示顯示路線 - http://run.plnkr.co/3G0T1bvEG4x4hs8l/#/list – Dom 2014-10-22 03:09:13

@Dom啊，有趣的方法。我沒有意識到我可以手動在URI上預先加入「/ things」，而不是依賴嵌套的狀態特性來爲我做！發表一個答案plz – maerics 2014-10-22 17:22:50

我不推薦使用嵌套路由，而是專門聲明url;不過，您也可以使用absolute route - '^/things/:x'。

使用你在你的問題中提供的路線，這裏是你如何可能去做的一個例子。

DEMO（用代碼）：http://plnkr.co/edit/sxOeCBipiQS7AOt4Ax4L?p=preview

DEMO（無代碼，示出了路線網址）：http://run.plnkr.co/uT4PLYDqk8ItzqaK/#/things

首先，設定該應用：

var app = angular.module('myApp', [ 
    'ui.router' 
]);

接下來，配置與該應用各種狀態。您可以使用角UI路由器的$stateParams service暴露在url任何參數，如果你需要獲取從資源/服務的任何數據，可以很方便：

app.config(function($stateProvider, $urlRouterProvider) { 

    // for any unknown routes, default to the '/things' url 
    $urlRouterProvider.otherwise('/things') 

    $stateProvider 
    .state('things', { 
     url: '/things', 
     templateUrl: 'things.html', 
     controller: function($scope, $state) { 
     // add items to the scope 
     $scope.items = ['Thing 1', 'Thing 2', 'Thing 3']; 

     // create an action that will change the state 
     $scope.goToDetails = function(scope) { 
      $state.go('details', { 
      x: scope.item 
      }) 
     } 
     } 
    }) 
    // create the details state 
    .state('details', { 
    url: '^/things/:x', 
    templateUrl: 'details.html', 
    controller: function($scope, $stateParams) { 
     // use $stateParams service 
     $scope.data = 'I am ' + $stateParams.x 
    } 
    }); 
});

希望這可以幫助並請讓我知道，如果你有任何問題！

來源

2014-10-23 02:51:38 Dom

Nest URIs但不是控制器或AngularUI中的視圖路由器

回答

相關問題