AngularJS - Кілька ng-переглядів в одному шаблоні

132

Я будую динамічний веб-додаток за допомогою AngularJS. Чи можливо мати декілька ng-viewв одному шаблоні?

angularjs ng-view

2

Здається, є запит на витяг, все ще з деякими помилками: github.com/angular/angular.js/pull/1198

— Alp

4

Ян Варвіг пише про роль директив в Angular. Це не відповідь на ваше запитання, але в деяких випадках його ідеї можуть бути хорошою альтернативою: jan.varwig.org/archive/angularjs-views-vs-directives/…

— Juha Palomäki

переглядав кутовий підручник і у нього був такий самий запитання, вони не роблять цього дуже зрозумілим, схоже на досить глибоку концепцію, хоча ..

— qwwqwwq

100

Ви можете мати лише один ng-view.

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

— пасина
джерело

1

відображення контролерів і шаблонів замінить весь елемент ng-перегляду, правда?

— zx1986

9

А як щодо динамічної зміни вмісту віджета? Не хочете ви створити подання для віджета та контролер для віджета та модель для віджета?

— Рей Суельцер

Чи рекомендується використовувати представлення даних? Хіба не краще визначати діви за допомогою ng-showта ng-hideі контролювати їх видимість за допомогою змінних? Тому що іноді я хотів би приховати / показати декілька компонентів

— SomethingSomething

39

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

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

Перевірте документацію декількох іменованих видів тут .

— Мортеза Зіяе
джерело

6

На жаль, як говорить readme ui-router: Примітка: UI-роутер знаходиться в активному розвитку. Таким чином, хоча ця бібліотека добре перевірена, API може змінюватися. Подумайте про використання його у виробничих програмах лише у тому випадку, якщо вам зручно дотримуватися журналу змін та відповідно оновити використання.

— траїноз

1

@trainoasis Використовував його для декількох проектів, здається, "дуже" стабільним і до цих пір у мене не було проблем щодо зміни API, адже я не пам'ятаю жодних великих змін в API.

— Morteza Ziyae

19

Я вірю, що ви можете досягти цього, просто отримавши одиноку ng-view. У головному шаблоні ви можете мати ng-includeрозділи для поданих подань, тоді в головному контролері визначайте властивості моделі для кожного під шаблону. Так що вони автоматично прив’язуються до ng-includeсекцій. Це те саме, що мати кількаng-view

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

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

— Tekz
джерело

2

За відсутності такого рішення, як UI-маршрутизатор, ng-include є дійсно життєздатною альтернативою, як ви пояснили. Те, що ng-include не може досягти, - це кілька переглядів, керованих URL-адресами (станом), $ route не може динамічно відображати різні види на основі поточної URL-адреси. Ми могли б скрутити руки Angular і зробити це можливим, використовуючи власну логіку в контролері, як, наприклад, в ng-include документації , але це не бажано шаблону архітектури додатків, UI-Router - це правильний тип рішення.

— Yiling

Один плюс для коментаря @Yiling. Використання ng-include є вирішенням проблеми.

— Фаршид Сабері

13

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

Однак цей проект дозволяє вам це зробити (шукайте ui-router).

— Лукаш Бахман
джерело

3

angular-ui здається хорошим вибором у (найближчому) майбутньому, але він все ще здається дуже нестабільним для використання у виробництві

— David Barreto

8

Можливо мати кілька або вкладені представлення даних. Але не за допомогою ng-view.

Первинний модуль маршрутизації в кутовій формі не підтримує декілька видів. Але ви можете використовувати ui-роутер. Це сторонній модуль, який можна отримати за допомогою Github, angular-ui / ui-router, https://github.com/angular-ui/ui-router . Також наразі розробляється нова версія ngRouter (ngNewRouter). На даний момент це не стабільно. Тому я пропоную вам простий приклад запуску з ui-роутером. Використовуючи його, ви можете називати представлення даних та вказувати, які шаблони та контролери слід використовувати для їх надання. Використовуючи $ 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

— Фаршид Сабері
джерело

Дякую, Фаршид, це чудово! Це слід згадати у кутовому сховищі Github github.com/angular-ui/ui-router, де я отримав модуль

— totaltotallyamazing

Я не впевнений, навіщо вам це потрібно робити. Чому б не включити ng-заголовок / колонтитул та ng-перегляд вмісту?

— користувач441521

ng-include буде працювати, якщо розміщуються файли, наприклад, на nodejs. Якщо працювати з локальним каталогом, це призведе до помилки між доменом.

— Сід

0

Ви не можете мати кілька ng-перегляду. Нижче наводиться випадок мого використання, коли я вирішив свою вимогу. Мені хотілося, щоб поведінка на вкладках була в діалозі моєї моделі Я зіткнувся з проблемою, як натискання на вкладки з гіперпосиланням, яке буде викликати посилання маршрутизатора. Я вирішив це за допомогою кнопки та css для вкладок. Коли користувач натискає на вкладку, він насправді не викликає гіперпосилання, яке завжди викликатиме ng-роутер. Коли користувач натискає на вкладку, він викличе метод, де я динамічно завантажую 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 буде прив’язаний до вашого контролера.

— Aslam anwer
джерело