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路由器 - 不显示嵌套的部分视图

回答

相关问题