Javascript AngularJS ui路由器-不显示嵌套的部分视图_Javascript_Angularjs_Angular Ui Router

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

javascript angularjs

Javascript AngularJS ui路由器-不显示嵌套的部分视图,javascript,angularjs,angular-ui-router,Javascript,Angularjs,Angular Ui Router,我有一个AngularJs应用程序，启动页面为index.html，默认情况下会显示项目视图，在页面顶部我会显示一个图标来显示todo项目（对于登录用户），我正在使用bootstrap的数据切换下拉列表。问题是每当我单击todo链接时，部分视图（todo.html）都不会显示。顺便说一句，我是新的角度世界，所以请原谅我，如果有什么愚蠢的事情。请参阅下面的代码： Index.html <!DOCTYPE html> <html lang="en" ng-app="myApp"&g

我有一个AngularJs应用程序，启动页面为index.html，默认情况下会显示项目视图，在页面顶部我会显示一个图标来显示todo项目（对于登录用户），我正在使用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>

ui路由器实际上不应该以这种方式使用。要将引导与angular集成，请查看UI引导-

然后，要实现下拉列表，请查看它们的基本示例。如果要使用单独的视图文件定义下拉内容，可以使用

如果您有一个复杂的视图层次结构，ui router非常有用，例如，您正在查找子视图的动态加载，同时保持父视图状态为静态。

首先在根模板中将ng view替换为ui view，因为您似乎想使用ui router而不是ng router

使用div of

ui view

将模板文件的内容包装为父元素

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

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

或者使用包含

ui视图的div描述符包装视图，以防vie包含多个标记。
我无法向您展示示例，因为您没有提供视图文件的内容
/app/views/projects/projects.html
/app/views/todo/todo.html

问题是，在应用第一个模板后，angular再也看不到放置新模板的位置。
在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'
                            }
                        }
                    })


这是一个很好的待办事项下拉列表
//在应用程序文件中
.state（'projects.todo'{
url:“/todo”，
观点：{
“main@”：{
templateUrl:“/app/views/todo/todo.html”，
控制器：“TodoCtrl”
},
'todoDropDown@projects.todo': {
templateUrl:“/app/views/partials/dropdown.html”
}
}
})

"todoDropDown@projects.todo“这真的很神奇，它告诉我们这个视图里面有另一个视图。你们可以添加控制器到它和所有其他选项，你们在ui路由器。通过这种方式，您可以分解尽可能多的可重复使用的部件。
我不打算将引导与angular集成，而只是尝试在“数据切换”下拉列表中显示部分视图，这正是我的答案解释的方法。如果没有引导集成，您的引导下拉列表将无法在angular中工作，您可以使用ng include设置局部视图。感谢您的回复。对不起，ng视图是一个输入错误，我只有ui视图。另外，我不明白你在说什么，所以你能给我举一些例子说明如何做到这一点吗？
<div class="container" ui-view>
    <div class="page-header">
        <h1>Title: {{title}}</h1>
    </div>
</div

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

<!-- 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'
                            }
                        }
                    })