这是我正在尝试做的事:http://plnkr.co/edit/sxJOPQAgyEZfcYfUReGR?p=preview
这里的文件:
的index.html
<body ng-app="app"> <h1 ui-view="title"></h1> <div ui-view="sidebar1"></div> <ul ui-view="sidebar2"></ul> <div ui-view="content"></div> </body>
app.js
angular .module('app',['ui.router','page1']) .config(['$locationProvider','$stateProvider','$urlRouterProvider',function ($locationProvider,$stateProvider,$urlRouterProvider) { $locationProvider.html5Mode(true); $stateProvider.state({ name: "page1",url: "/page1",abstract: true }); $urlRouterProvider.otherwise('/page1'); }]);
page1.js
angular .module('page1',['ui.router']) .config(function ($stateProvider) { $stateProvider.state({ name: 'page1.main',views: { title: { template: "My Title" },sidebar1: { template: "<ul><li ng-repeat='item on items'>{{item}}</li></ul>",controller: function($scope) { $scope.items = ['foo1','bar1']; } },sidebar2: { template: "<ul><li ng-repeat='item on items'></li></ul>",controller: function($scope) { $scope.items = ['foo2','bar2']; } },content: { template: "<div ng-repeat='one in many'>{{one}}</div>",resolve: { stuff: function () { return [1,2,3,4,5] } },controller: function($scope,stuff) { $scope.many = stuff; } } } }); });
我错过了什么?
非常感谢提前.
解决方法
首先,正如doc:Abstract States中所定义的那样,必须定义一个抽象状态的子状态,即必须定义一些url(这将帮助ui-router找出要使用的状态…抽象父进程无法访问)
$stateProvider.state({
名称:’page1.main’,
url:’/ main’,
并且默认路由更改为:
$urlRouterProvider.otherwise('/page1/main');
最重要的是使用正确的ui-view命名:
$stateProvider.state({ name: 'page1.main',url : '/main',views: { "title@": { template: "My Title" },"sidebar1@": { template: "<ul><li ng-repeat='item on items'>{{item}}</li></ul>","sidebar2@": { template: "<ul><li ng-repeat='item in items'>{{item}}</li></ul>","content@": { ...
我们可以看到,视图名称后缀为@,这意味着:在顶部根,未命名视图(通常是index.html)中搜索它们
在这里查看更多:View Names – Relative vs. Absolute Names
来自doc的一小段摘录:
/////////////////////////////////////////////////////// // Absolute targeting using '@' // // Targets any view within this state or an ancestor // /////////////////////////////////////////////////////// // Absolutely targets the 'info' view in this state,'contacts.detail'. // <div ui-view='info'/> within contacts.detail.html "info@contacts.detail" : { } // Absolutely targets the 'detail' view in the 'contacts' state. // <div ui-view='detail'/> within contacts.html "detail@contacts" : { } // Absolutely targets the unnamed view in parent 'contacts' state. // <div ui-view/> within contacts.html "@contacts" : { }
工作plunker.
编辑:如何在URL中保留/ page1
由于(几乎)总是使用ui-router,我们可以给我们这种行为.诀窍是,重置url评估以在根级别开始 – 即使是对于子级(没有父URL部分).这可以通过一个神奇的“^”符号完成
$stateProvider.state({ name: 'page1.main',url : '^/page1',views: { ....
这是doc:
> Absolute Routes (^)(引用)
If you want to have absolute url matching,then you need to prefix your url string with a special symbol ‘^’.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。