Kan*_*ane 5 javascript angularjs
我开始玩AngularJS,我在处理嵌套子视图的路由时遇到了一些麻烦.
我的网站有一个基本的两列布局,如下所示:
[Main 1] [Main 2] [Main 3]
--------------------------------------
A | Content for A goes into this frame.
B |
C |
D |
E |
当您通过主菜单(主菜单1,主菜单2,主菜单3)导航到页面时,将动态生成侧菜单链接(a,b,c,d,e).
即,导航到main1链接将发出请求/main1,返回JSON链接数组.
当用户单击其中一个链接时,它将/main1/a向内容框架发出请求并将数据加载到内容框架中.
我目前这样做的方式是:
index.html的:
<body>
<a href="/main1">Main 1</a>
<div ng-view></div>
</body>
app.js:
angular.module('test', [
'test.controllers'
])
.config([
'$routeProvider',
function($routeProvider)
{
$routeProvider
.when('/main1', {
templateUrl: '/partials/main1.html',
controller: 'Main1Ctrl'
})
.when('/main1/:id', {
templateUrl: '/partials/main1.html',
controller: 'Main1Ctrl'
})
}
]);
这就是我陷入困境的地方.我的Main1Ctrl控制器目前看起来像:
angular.module('test.controllers', [])
.controller('Main1Ctrl', [
'$scope',
'$routeParams',
'Data',
function($scope, $routeParams, Data)
{
$scope.submenu = Data.query();
}
]);
我遇到的问题是如何分配$scope.content.
如果URL中没有指定ID,我需要等待子菜单渲染才能从列表中获取第一个ID(如果没有请求内容,则默认为第一个子菜单项).
如果用户在URL中指定了ID,我希望并行启动/main1和/main1/:id请求.用户在看到其内容之前不需要等待菜单加载.
这甚至是处理这种布局的好方法吗？
btm*_*tm1 -1
我利用路由提供程序和变量来创建一个您可以在任何地方访问的全局对象。然后，您可以使用 ng-show/hide、ng-switch 或 ui-if 来显示或隐藏或切换应用程序的适用部分，以实现多级深度链接。
看看我建造的这个笨蛋。它将准确地告诉您如何去做。
http://plnkr.co/edit/beAm3WRomMafKzx1SoSZ?p=preview
| 归档时间： |
|
| 查看次数： |
4166 次 |
| 最近记录： |