AngularJS ui路由器 - 不顯示嵌套的部分視圖

我有一個AngularJs應用程序，啓動頁面爲index.html，默認情況下，項目視圖將顯示在頁面頂部我顯示一個圖標來顯示待辦事項（針對登錄用戶），我正在使用bootstrap的數據切換下拉菜單。問題是每當我點擊todo鏈接時，部分視圖（todo.html）沒有顯示。順便說一句，我是新的角度世界，所以請原諒我，如果有什麼愚蠢的。請參閱下面的代碼：AngularJS ui路由器 - 不顯示嵌套的部分視圖

的Index.html

<!DOCTYPE html> 
<html lang="en" ng-app="myApp"> 
<head></head> 
<body> 
    <a data-toggle="dropdown" class="dropdown-toggle" ui-sref=".todo"> 
     <i class="icon-tasks"></i> 
     <span class="badge badge-grey">4</span> 
    </a> 

    <div ng-view></div> 
</body>

app.js

// For any unmatched url, redirect to /projects 
$urlRouterProvider.otherwise("/projects"); 
// 
// Now set up the states 
$stateProvider 
    .state('projects', { 
     url: "/projects", 
     templateUrl: "/app/views/projects/projects.html", 
     controller: "projectController" 
    }) 
    .state('projects.todo', { 
     url: "/todo", 
     templateUrl: "/app/views/todo/todo.html"   
    });

來源

2014-02-14 user972255

UI路由器是不是真的應該以這種方式來使用。要整合bootstrap和角度，你想看看UI Bootstrap - http://angular-ui.github.io/bootstrap/

然後要實現你的下拉菜單，請看他們的基本示例。如果您想使用單獨的視圖文件來定義您的下拉內容，則可以使用<div ng-include="'mycontent.html'"></div>。

如果您有一個複雜的視圖層次結構，例如在查找子對象的動態加載的同時保持父對象的狀態爲靜態，則ui-router非常有用。

來源

2014-02-14 15:36:23

我並不是想將引導與角度整合，而是試圖在數據切換下拉菜單中顯示局部視圖 – user972255

這正是我的答案解釋如何做的。如果沒有bootstrap集成，你的引導下拉菜單將無法工作，你可以使用'ng-include'來設置你的局部視圖。 –

首先更換NG視圖爲根模板UI視圖，因爲它似乎要使用UI路由器代替NG-路由器。

用ui-view的div作爲父元素包裝模板文件的內容。

/app/views/projects/projects.html 
/app/views/todo/todo.html 

<div ui-view> 
    ... previously defined content ... 
</div>

比方說，你的觀點是

<div class="container"> 
    <div class="page-header"> 
     <h1>Title: {{title}}</h1> 
    </div> 
</div

你需要添加ui-view到div

<div class="container" ui-view> 
    <div class="page-header"> 
     <h1>Title: {{title}}</h1> 
    </div> 
</div

或包裝你的觀點與含萬一ui-view描述div您VIE包含幾個標籤。由於您沒有提供視圖文件的內容，因此無法向您展示示例。

/app/views/projects/projects.html 
/app/views/todo/todo.html

問題是，應用角度的拳頭模板沒有看到放置新模板的地方了。

來源

2014-02-18 17:15:47 kaktooss

感謝您的回覆。對不起ng-view是一個錯字，我只有ui-view。另外，我不明白你在說什麼，所以你可以給我一些關於如何做到這一點的例子嗎？ – user972255

在您確定這一切在$ stateProvider UI路由器，所以你應該定義你必須有屬於它的另一個視圖視圖，例如：

<!-- In index.html the main view that will have all the page views--> 
<div id="main" ui-view="main"></div> 

<!-- In todo.html with a partial with the dropdown code in dropdown.html --> 
<h1> This is a nice todo drop down </h1> 
<div id="todoDropDown" ui-view="todoDropDown"></div> 


//In your app file 
    .state('projects.todo', { 
         url: '/todo', 
         views: { 
          '[email protected]': { 
           templateUrl: '/app/views/todo/todo.html', 
           controller: 'TodoCtrl' 
          }, 
          '[email protected]': { 
           templateUrl: '/app/views/partials/dropdown.html' 
          } 
         } 
        })

「todoDropDown @項目。待辦事項「這就是魔法，它告訴我們這個觀點有另一種觀點。你可以添加控制器到它和你在ui-router中的所有其他選項。通過這種方式，您可以儘可能分解可重複使用的零件。

來源

2014-08-19 15:13:53

AngularJS ui路由器 - 不顯示嵌套的部分視圖

回答

相關問題