发表新帖
发表新帖

AngularJS - Multiple ng-view in single template

后端 未结
关注
6 1760
我寻月下人不归
我寻月下人不归 2020-11-29 17:38

I am building a dynamic web app by using AngularJS. Is it possible to have multiple ng-view on a single template?

相关标签:
6条回答
  • 挽巷
    2020-11-29 18:13

    I believe you can accomplish it by just having single ng-view. In the main template you can have ng-include sections for sub views, then in the main controller define model properties for each sub template. So that they will bind automatically to ng-include sections. This is same as having multiple ng-view

    You can check the example given in ng-include documentation

    in the example when you change the template from dropdown list it changes the content. Here assume you have one main ng-view and instead of manually selecting sub content by selecting drop down, you do it as when main view is loaded.

    0 讨论(0)
  • 甜味超标
    2020-11-29 18:13

    It is possible to have multiple or nested views. But not by ng-view.

    The primary routing module in angular does not support multiple views. But you can use ui-router. This is a third party module which you can get via Github, angular-ui/ui-router, https://github.com/angular-ui/ui-router . Also a new version of ngRouter (ngNewRouter) currently, is being developed. It is not stable at the moment. So I provide you a simple start up example with ui-router. Using it you can name views and specify which templates and controllers should be used for rendering them. Using $stateProvider you should specify how view placeholders should be rendered for specific state.

    <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>

    You need referencing angularjs, and angular-ui.router for this sample.

    $ bower install angular-ui-router
    0 讨论(0)
  • 野的像风
    2020-11-29 18:13

    You cant have multiple ng-view. Below is my use case where I solved my requirement. I wanted to have tabbed behavior in my model dialog. I was facing issue as click on tabs having hyperlink which will invoke router links. I solved this using button and css for tabs. When user clicks on tab, it actually will not call any hyperlink which will always invoke the ng-router. When user click on tab it will call a method, where I dynamcilly load html. Below is the function on click of tab

    self.submit = function(form) {
                $templateRequest('resources/items/employee/test_template.html').then(function(template){
                var compiledeHTML = $compile(template)($scope);
                $("#d").replaceWith(compiledeHTML);
});

    User $templateRequest. In test_template.html page add your html content. This html content will be bind to your controller.

    0 讨论(0)
  • 灰色年华
    2020-11-29 18:14

    UI-Router is a project that can help: https://github.com/angular-ui/ui-router One of it's features is Multiple Named Views

    UI-Router has many features and i recommend you using it if you're working on an advanced app.

    Check documentation of Multiple Named Views here.

    0 讨论(0)
  • 不知归路
    2020-11-29 18:17

    You can have just one ng-view.

    You can change its content in several ways: ng-include, ng-switch or mapping different controllers and templates through the routeProvider.

    0 讨论(0)
  • 北海茫月
    2020-11-29 18:30

    Using regular ng-view module you cannot have more than one dynamic template.

    However, this project enables you to do so (look for ui-router).

    0 讨论(0)
 看不清?
提交回复
热议问题