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

首先在根模板中将 ng-view 替换为 ui-view ，因为您似乎想要使用ui-router而不是ng-router。< / p>

使用div ui-view作为父元素包装模板文件的内容。

/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

或使用包含div描述符的ui-view包装您的视图，以防您的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'
                            }
                        }
                    })

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

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

3 个答案: