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-контент будет привязан к вашему контроллеру.

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