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

Question

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

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

554 6

angularjs ng-view

6 ответов:

Comments

Ничего не найдено.

pasine · Accepted Answer · 2015-06-16 10:57:28

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

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

Morteza Ziaeemehr · Accepted Answer · 2015-11-21 08:26:07

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

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

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

Tekz · Accepted Answer · 2014-11-04 08:43:01

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

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

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

ŁukaszBachman · Accepted Answer · 2013-07-09 13:17:54

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

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

Farshid Saberi · Accepted Answer · 2015-10-14 19:00:50

можно иметь несколько вложенных представлений. Но не по НГ-взгляду.

основной модуль маршрутизации в angular не поддерживает несколько видов. Но вы можете использовать ui-маршрутизатор. Это модуль третьих лиц, которые вы можете сделать через GitHub, угловые-интерфейс/интерфейс-маршрутизатор, 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.маршрутизатор для этого образца.
$ bower install angular-ui-router

Aslam anwer · Accepted Answer · 2018-08-18 09:15:58

вы не можете иметь несколько ng-view. Ниже приведен мой случай использования, где я решил мое требование. Я хотел, чтобы в моем диалоге модели было заложено поведение. Я столкнулся с проблемой, как нажать на вкладки, имеющие гиперссылку, которая будет вызывать ссылки маршрутизатора. Я решил это с помощью кнопки и CSS для вкладки. Когда пользователь нажимает на вкладку, он фактически не будет вызывать гиперссылку, которая всегда будет вызывать ng-маршрутизатор. Когда пользователь нажимает на вкладку, он вызывает метод, где я dynamcilly загружаю html. Ниже приведена функция по щелчку мыши вкладка
self.submit = function(form) {
                $templateRequest('resources/items/employee/test_template.html').then(function(template){
                var compiledeHTML = $compile(template)($scope);
                $("#d").replaceWith(compiledeHTML);
});
User $templateRequest. В test_template.html страница добавьте свой html-контент. Этот html-контент будет привязан к вашему контроллеру.