AngularJS - несколько ng-view в одном шаблоне

132

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

angularjs ng-view Jayram
источник
2
похоже, есть запрос на перенос, но с некоторыми ошибками: github.com/angular/angular.js/pull/1198
Alp
4
Ян Варвиг пишет о роли директив в Angular. Это не ответ на ваш вопрос, но в некоторых случаях его идеи могут быть хорошей альтернативой: jan.varwig.org/archive/angularjs-views-vs-directives/…
Юха Паломяки
проходил обучение по angular и у него был точно такой же вопрос, они не очень четко это разъясняют, хотя это кажется довольно глубоким понятием ..
qwwqwwq

Ответы:

100

Вы можете иметь только один ng-view.

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

pasine
источник
1
Контроллеры и шаблоны сопоставления заменят весь элемент ng-view, верно?
zx1986
9
А как насчет динамического изменения содержимого виджета? Разве вы не хотите создать представление для виджета и контроллер для виджета и модель для виджета?
Ray Suelzer
Рекомендуется ли использовать просмотры? Не лучше ли определять div с помощью ng-showи ng-hideи контролировать их видимость с помощью переменных? Потому что иногда мне хочется скрыть / показать несколько компонентов
SomethingSomething
39

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

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

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

Мортеза Зияе
источник
6
К сожалению, как говорится в readme для ui-router: Примечание: UI-Router находится в активной разработке. Таким образом, хотя эта библиотека хорошо протестирована, API может измениться. Рассмотрите возможность использования его в производственных приложениях, только если вам удобно следить за журналом изменений и соответствующим образом обновлять свое использование.
trainoasis
1
@trainoasis Использовал его для нескольких проектов. Кажется «очень» стабильным, и до сих пор у меня не было проблем с изменением API, на самом деле я не помню каких-либо серьезных изменений в API.
Morteza Ziyae
19

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

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

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

Tekz
источник
2
Как вы объяснили, при отсутствии такого решения, как UI-Router, ng-include действительно является жизнеспособной альтернативой. Что ng-include не может выполнить, так это несколько представлений, управляемых URL (состоянием), $ route не может динамически отображать разные представления на основе текущего URL. Мы могли бы повернуть руки Angular и добиться этого, используя настраиваемую логику в контроллере, как в примере в ng-include документации , но это нежелательный шаблон архитектуры приложения, UI-Router - правильный тип решения.
Yiling
Один плюс за комментарий @Yiling. Обходной путь - использование ng-include.
Фаршид Сабери
13

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

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

ŁukaszBachman
источник
3
angular-ui кажется хорошим выбором в (ближайшем) будущем, но он по-прежнему кажется очень нестабильным для производственного использования
Дэвид Баррето
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>

Для этого примера вам нужны ссылки на angularjs и angular-ui.router.

$ bower install angular-ui-router
Фаршид Сабери
источник
Спасибо, Фаршид, это здорово! Это следует упомянуть в репозитории angular-ui / ui-router на Github github.com/angular-ui/ui-router, где я получил модуль
потрясающе
Я не уверен, зачем вам это нужно. Почему бы не включить ng-заголовок / нижний колонтитул и не просмотреть содержимое?
user441521
ng-include будет работать, если файлы размещены, например. на nodejs. Если вы работаете с локальным каталогом, это вызовет междоменную ошибку.
Сид
0

У вас не может быть нескольких ng-view. Ниже приведен пример использования, в котором я решил свое требование. Я хотел иметь поведение с вкладками в моем диалоговом окне модели. У меня возникла проблема, когда я нажимал на вкладки с гиперссылкой, которая вызывала ссылки маршрутизатора. Я решил это с помощью кнопки и CSS для вкладок. Когда пользователь щелкает вкладку, он фактически не вызывает гиперссылки, которые всегда будут вызывать ng-router. Когда пользователь щелкает вкладку, он вызывает метод, в котором я динамически загружаю html. Ниже представлена ​​функция при нажатии на вкладку

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

Пользователь $ templateRequest. На странице test_template.html добавьте свой html-контент. Этот HTML-контент будет привязан к вашему контроллеру.

Аслам анвер
источник