我有一个启动页面为index.html的AngularJs应用程序，默认情况下将显示项目 View ，并且在页面顶部我显示一个图标来显示待办事项(对于登录用户)我正在使用 Bootstrap 的数据切换下拉菜单。问题是每当我单击待办事项链接时，部分 View (todo.html)都不会显示。顺便说一句，我是 Angular 世界的新手，所以如果有任何愚蠢的地方请原谅我。请看下面的代码:
索引.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"
});
最佳答案
首先在根模板中将 ng-view 替换为 ui-view，因为您似乎想使用 ui-router 而不是 ng-router。
使用 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 包装您的 View ，以防您的 vie 包含多个标签。
我无法向您展示示例，因为您没有提供 View 文件的内容。
/app/views/projects/projects.html
/app/views/todo/todo.html
问题是，在应用 Angular 的第一个模板后，看不到放置新模板的地方了。
关于javascript - AngularJS ui 路由器 - 不显示嵌套的部分 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21782542/