AngularJS - 单个模板中的多个ng视图

如果没有像UI-Router这样的解决方案,ng-include确实是一个可行的替代方案,正如您所解释的那样.ng-include无法实现的是URL(状态)驱动的多视图,$ route无法根据当前URL动态呈现不同的视图.我们可以通过在控制器中使用自定义逻辑来扭转Angular的臂,并使其成为可能,例如`ng-include` [文档]中的示例(https://docs.angularjs.org/api/ng/directive/ngInclude) ,但它不是理想的应用程序架构模式,UI-Router是正确的解决方案类型. (2认同)

Answer 4

Łuk*_*man 13

使用常规ng-view模块,您不能拥有多个动态模板.

但是,这个项目可以让你这样做(寻找ui-router).

angular-ui在(近)未来似乎是一个不错的选择,但对于生产使用它似乎仍然非常不稳定 (3认同)

Answer 5

Far*_*eri 8

可以有多个或嵌套的视图.但不是通过ng-view.

angular中的主路由模块不支持多个视图.但你可以使用ui-router.这是第三方模块,您可以通过Github,angular-ui/ui-router,https://github.com/angular-ui/ui-router获取.目前正在开发新版本的ngRouter(ngNewRouter).目前不稳定.所以我为你提供了一个简单的ui-router启动示例.使用它可以命名视图并指定应该使用哪些模板和控制器来渲染它们.使用$ stateProvider,您应指定应如何为特定状态呈现视图占位符.

<body ng-app="main">
    <script type="text/javascript">
    angular.module('main', ['ui.router'])
    .config(['$locationProvider', '$stateProvider', function ($locationProvider, $stateProvider) {
        $stateProvider
        .state('home', {
            url: '/',
            views: {
                'header': {
                    templateUrl: '/app/header.html'
                },
                'content': {
                    templateUrl: '/app/content.html'
                }
            }
        });
    }]);
    </script>
    <a ui-sref="home">home</a>
    <div ui-view="header">header</div>
    <div ui-view="content">content</div>
    <div ui-view="bottom">footer</div>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js">
</body>

Run Code Online (Sandbox Code Playgroud)

您需要为此示例引用angularjs和angular-ui.router.

$ bower install angular-ui-router

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，11 月前
查看次数：	145445 次
最近记录：	7 年，9 月前