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

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

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

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

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

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

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

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

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

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

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

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

Можливо мати кілька або вкладені представлення даних. Але не за допомогою 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

Ви не можете мати кілька 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 буде прив’язаний до вашого контролера.