AngularJS - множественный просмотр ng в одном шаблоне

Я создаю динамическое веб-приложение, используя AngularJS. Возможно ли иметь несколько ng-view для одного шаблона?

Ответ 1

У вас может быть только один ng-view.

Вы можете изменить его содержимое несколькими способами: ng-include, ng-switch или сопоставление разных контроллеров и шаблонов через routeProvider.

Ответ 2

UI-Router - это проект, который может помочь: https://github.com/angular-ui/ui-router Одна из его функций - Несколько именованных просмотров

UI-Router имеет множество функций, и я рекомендую вам использовать его, если вы работаете над расширенным приложением.

Проверьте документацию о нескольких именованных представлениях здесь.

Ответ 3

Я считаю, что вы можете сделать это, просто имея один ng-view. В главном шаблоне вы можете иметь разделы ng-include для под-представлений, а затем в главном контроллере определить свойства модели для каждого дополнительного шаблона. Чтобы они автоматически привязывались к разделам ng-include. Это то же самое, что с несколькими ng-view

Вы можете проверить пример, приведенный в ng-include документации

в примере, когда вы изменяете шаблон из выпадающего списка, он меняет содержимое. Здесь предположим, что у вас есть один основной ng-view и вместо того, чтобы вручную выбирать субсодержание, выбрав drop down, вы делаете это, как при загрузке основного представления.

Ответ 4

Используя обычный ng-view модуль, вы не можете иметь более одного динамического шаблона.

Однако этот проект позволяет это сделать (ищите ui-router).

Ответ 5

Возможно наличие нескольких или вложенных представлений. Но не по 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>

Для этого образца вам нужно указать угловые и angular -ui.router.

$ bower install angular-ui-router