AngularJS ui路由器 - 未显示嵌套的部分视图

Question

我有一个AngularJs应用程序，启动页面为index.html，默认情况下将显示项目视图，在页面顶部我显示一个图标，显示我正在使用的待办事项（对于登录用户） bootstrap的数据切换下拉列表。 问题是每当我点击todo链接时，部分视图（todo.html）没有显示。 顺便说一句，我是角色世界的新手所以如果有什么傻话，请原谅我。 请参阅以下代码：

的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"          
  });

Answer 1

首先在根模板中用ui-view替换ng-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

你需要在div中添加ui-view

<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

问题是，在拳头模板应用角度后，再也看不到放置新模板的地方了。

Answer 2

ui-router实际上不应该以这种方式使用。 要将bootstrap与angular集成，你想看看UI Bootstrap - http://angular-ui.github.io/bootstrap/

然后，为了实现你的下拉，看看他们的基本例子。 如果要使用单独的视图文件来定义下拉内容，可以使用<div ng-include="'mycontent.html'"></div> 。

如果你有一个复杂的视图层次结构，ui-router非常有用，你可以在这里查找子动态加载，同时保持父状态是静态的。

Answer 3

在ui-router中你在$ stateProvider中定义了所有这些，所以你应该定义你有一个视图，它有另一个属于它的视图，例如：

<!-- 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: {
                            'main@': {
                                templateUrl: '/app/views/todo/todo.html',
                                controller: 'TodoCtrl'
                            },
                            'todoDropDown@projects.todo': {
                                templateUrl: '/app/views/partials/dropdown.html'
                            }
                        }
                    })

“todoDropDown@projects.todo”这很神奇，它告诉这个视图里面有另一个视图。 您可以添加控制器以及ui-router中的所有其他选项。 通过这种方式，您可以尽可能多地分解可重复使用的部件。

AngularJS ui路由器 - 未显示嵌套的部分视图

问题描述

3 个解决方案

解决方案1
2 2014-02-18 17:15:47

解决方案2
0 2014-02-14 15:36:23

解决方案3
0 2014-08-19 15:13:53

AngularJS ui路由器 - 未显示嵌套的部分视图

问题描述

3 个解决方案

解决方案1 2 2014-02-18 17:15:47

解决方案2 0 2014-02-14 15:36:23

解决方案3 0 2014-08-19 15:13:53

解决方案1
2 2014-02-18 17:15:47

解决方案2
0 2014-02-14 15:36:23

解决方案3
0 2014-08-19 15:13:53