嵌套視圖和控制器

我需要創建下一個層次結構：我在我的應用程序中獲得了多個用戶角色。我的應用程序的界面包含一個頂部導航欄，每個角色都有不同的選項卡。每個選項卡通常具有主 - 細節視圖，其中顯示了一些實體，並且默認情況下加載了第一個實體。嵌套視圖和控制器

在掙扎認證之前（我發現了一些關於http攔截器等的文章）我想知道如何做最簡單的事情：導航系統。

例如，假設我硬編碼了我的用戶角色，管理角色默認加載。我有一個cp.html文件，其中的頂部導航是。如果用戶登錄，當我轉到'/'路由時，我應該用admin標籤將他重定向到cp.html。如果用戶沒有登錄，我應該將他重定向到'/ login'頁面。

這是示例cp.html的：

<div class="navbar"> 
    <div class="navbar-inner"> 
     <ul class="nav"> 
      <li><a href="#/desktop">Desktop</a></li> 
      <li><a href="#/companies">Companies</a></li> 
      <li><a href="#/users">Users</a></li> 
     </ul> 
    </div> 
</div> 
<div ng-include src="include"> 
</div>

這是家（ '/'）控制器：

function homeController($scope, $routeParams, $location) { 
    if ($routeParams.tab) { 
     $scope.include = '/templates/' + $routeParams.tab + '.html'; 
    } else { 
     $scope.include = '/templates/companies.html'; 
    } 
}

和主app.js：

app.config(['$routeProvider', function($routeProvider) { 

$routeProvider 
    .when('/', { 
     templateUrl: 'templates/cp.html', 
     controller: homeController 
    }) 

    .when('/:tab', { 
     templateUrl: 'templates/cp.html', 
     controller: homeController 
    })

所以這裏取決於：標籤參數我可以包含不同的.html模板。但如何處理控制器？假設我想要去公司選項卡。我想要我的導航欄+公司內容。如果我點擊公司選項卡上的文件，但我留在homeController。如果我使用ng-controller指令，那我怎樣才能得到公司的id？在典型的例子中，我們有/ companies /：companyId路由。但是，如果我在routeProvider中使用此路由，那麼我應該如何使用templateUrl？此外，當我點擊公司標籤時，我不會更改我的網址，只包括companies.html。

我完全和AngularJS中的嵌套視圖和路由混淆。我不想雖然使用第三方庫，試圖通過自己弄清楚如何處理這個...提前

感謝

來源

2013-05-03 Victor

看看的angular ui-router，我認爲這正是你正在找。同樣嘗試their example app。

來源

2013-05-03 08:13:39 joakimbeng

我會嘗試，但我只是想沒有圖書館...不管怎樣，謝謝！ – Victor 2013-05-03 18:46:00

@Victor看看我所做的這個jsfiddle：http://jsfiddle.net/joakimbeng/bPruQ/試圖動態加載控制器，它受ng-view指令的啓發。可能是你可以使用的東西？ – joakimbeng 2013-05-03 20:46:12

嵌套視圖和控制器

回答

相關問題