javascript - 如何使用 AngularJS 路由到 subview ?

标签 javascript angularjs

我已经开始使用 AngularJS,但在处理到嵌套 subview 的路由时遇到了一些麻烦。

我的网站有一个基本的两栏布局,如下所示:

[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 Controller 目前看起来像:

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 请求并行触发。用户在看到内容之前不需要等待菜单加载。

这甚至是处理此类布局的好方法吗?

最佳答案

我已经利用路由提供程序和变量创建了一个您可以在任何地方访问的全局对象。然后,您可以使用 ng-show/hide、ng-switch 或 ui-if 来显示或隐藏或切换应用程序的适用部分,以实现多级深度链接。

看看我 build 的这个 plunker。它会告诉你具体怎么做。

http://plnkr.co/edit/beAm3WRomMafKzx1SoSZ?p=preview

关于javascript - 如何使用 AngularJS 路由到 subview ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14311726/

相关文章:

javascript - 如何消除 Angular 中的故障/延迟?

javascript - 获取名为 post 的 reangular 属性

javascript - 如何在 Javascript/Jquery 中动态创建多维对象

javascript - 在二维数组中查找数组的索引?

regex - fs.writefile 仅在 Node js 中的最后一个函数中执行

html - ng-grid 标题单元格中的文字换行

javascript - 将值从 javascript 传递到 html

javascript - 如何在 JavaScript 类中编写生成器?

javascript - 优化 Angular 重复代码

javascript - Angular 不渲染模板主要和常见的是什么