Как динамически подгрузить всплывающее окно в AngularJS?

Question

[Дмитрий]

Имеется веб-проект: backend - asp.net, frontend - angularjs.

Есть страница, за которую отвечает модуль mainApp.
Есть страница с регистрацией, за которую отвечает LoginLayerApp.

Чего хочется: при нажатии на кнопку всплывало окно с регистрацией.

Что пробовал:
1.) Подгружать с помощью JQuery и внедрять в DOM.
2.) Подгружать через $http в AngularJS и с помощью библиотеки ngDialog открывать всплывающее окно.
3.) Воткнуть в iframe

Проблема в том, что подгружается голый HTML, но я не знаю как "за-inject-ить" LoginLayerApp, чтобы затем перекомпилировать этот голый подгруженный HTML.

Как это сделать наиболее правильно? Может быть следует вообще по-другому организовать?

RequireJS или WebPack использовать не выйдет, слишком большой legacy-проект для внедрения ради такой мелочи.

Answer 1

[Николай]

А воспользоваться штатными возможностями AngularJs(указать templateUrl:'path' в компоненте/директиве) вы почему не хотите?
Если таки не хотите - нужно вызвать $compile для загруженного куска DOM.

Comments

[Дмитрий]

Указывал template вот здесь, при этом выдавал голый HTML.

// Подгружаем страничку
svc.getRegistrationLayer().success(function (data) {
    ngDialog.open({
        // Используем как template
        template: data,
        plain: true,
        className: 'ngdialog-theme-default'
    });
});

Хочу наиболее просто решить проблему. Через $compile запутался какая должна быть последовательность действий, напр.
1.подгрузить банд с модулем
2.выполнить его
3.внедрить в angular
4.загрузить страницу
5.открыть всплывающее окошко
6.перекомпилировать DOM.

[Николай]

Вообще говоря ngDialog и так должен всё это делать. Нужно больше кода.

[Николай]

Или у вас внутри этого template другое angular-приложение должно запуститься?

[Дмитрий]

Николай: да, скорее всего так. Вот основная структура страницы с регистрацией:

@using Inventum.ViewModels.Account
@using Microsoft.Owin.Security

@{
    Layout = null;
}

<link href="~/Content/css/layers/Login/loginRegistrationLayer.min.css" rel="stylesheet" />


<div ng-app="loginLayerApp"
     ng-controller="loginLayerController as loginCtrl"
     ng-init="init(); returnUrl = '@ViewBag.ReturnUrl'; type = ('@ViewBag.Type' == '') ? 'login' : '@ViewBag.Type'; form={}; user={};"
     esc-key="closeLayer()"
     class="login-app-container"
     tabindex="0">
    <div class="container" ng-class="{'mobile': !desktop, 'desktop': desktop }" ng-switch on="type">

        <!-- =============== LOGIN =============== -->
        <div class="registration-container" ng-switch-when="login">
            {{loginCtrl.desktop}}
            {{desktop}}
            <h1>@Html.ClickZone("NewRegLogin.Login.Title")</h1>
            <div class="main-label">
                <span>@Html.ClickZone("NewRegLogin.Login.HelpLabel")</span>
                <br ng-show="phoneBreakpoint">
            </div>

            <!-- ======== Errors block ======== -->
          
            <!-- ======== Errors block ======== -->

            <div class="options">


                <ng-form name="form.userForm" ng-class="{'showMe': nosocial && !desktop}" novalidate enter-key="trySubmit = true; submitForm(form.userForm.$valid, user)">
                    <!-- <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate> -->
                    <div class="emailFocusHandler" ng-hide="desktop || nosocial" ng-click="nosocial = true;"></div>
                    <div class="group">
                        
                    </div>


                    <div ng-show="desktop || nosocial">
                        <div class="group">

                        </div>

                        <div class="help-buttons">
                            
                        </div>

                        <div class="error-block" ng-if="loginFailed && answerCode == ANSWERS.LOGIN.UserNoutFound">
                        </div>

                        <button type="submit" ng-click="trySubmit = true; submitForm(form.userForm.$valid, user)">@Html.ClickZone("NewRegLogin.SignIn") </button>
                    </div>
                </ng-form>

                <div class="delimeter" ng-show="desktop || nosocial"></div>

            </div>
        </div>
        <!-- =============== LOGIN =============== -->
       
</div>


@section scripts {
    <!-- ANGULARJS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>

    @Scripts.Render("~/bundles/js/layer/newLogin")

    <script src="https://www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit" async defer></script>
}

[Николай]

я думаю вам нужно вызывать angular.bootstrap руками в данном случае. https://docs.angularjs.org/api/ng/function/angular...

[Дмитрий]

Николай: а как перед этим внедрить модуль в angular, если он входит в состав bundle, который генерирует asp.net?

Сделать endpoint в серверном контроллере, который будет выдавать страничку вида

@{
    Layout = null;
}


<!-- ANGULARJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>

@Scripts.Render("~/bundles/js/layer/newLogin")

<script src="https://www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit" async defer></script>

Где loginLayerApp внедряется в angular

(function () {
    var app = angular.module('loginLayerApp', ['ngMessages', 'ngAnimate', 'vcRecaptcha']);

    console.log("Hello there!");
})();

И после этого уже вызывать angular.bootstrap, верно?

[Николай]

ну да, как-то так должно работать.

[Дмитрий]

Николай: попробовал подгрузить, все скомпилировалось, но не полностью. Я так понял проблема в том, что в страница с регистрацией написана под другой контролер loginLayerController, и вот он почему-то не вызывается.

[Николай]

Дмитрий: а покажите, как вы bootstrap делаете для этого приложения? Которое в модальном окне.

[Дмитрий]

Николай:

// Подгружаю данные через сервис svc(к $http обращение внутри)
                svc.getRegistrationLayer().success(function (data) {
					// Подгружаю отдельно вручную таблицу стилей
                    var link = document.createElement('link');
                    link.rel = "stylesheet";
                    link.type = "text/css";
                    link.href = "/Content/css/layers/Login/loginRegistrationLayer.min.css";
                    // Добавляю таблицу стилей в head
                    document.head.appendChild(link);

                    // В место для всплывающего окна вставляю полученную data
                    $('#placeForLayer').append(data);
                    // Отображаю
                    $('#placeForLayer').parent().show();
                    // Компилирую
                    angular.bootstrap(document, ['loginLayerApp']);
            });

Использовал смесь с чистым JS и ещё JQuery чтобы просто заставить это работать хотя бы.

[Николай]

вам нужно бутстрарпить не на document, а на той ноде, в которой у вас написано ng-app='loginLayerApp'. Ну а дальше ,если ангуляр через DI что-то не может задеплоить, нужно это ему помочь. У вас модуль прям так и называется "loginLayerApp"?

[Дмитрий]

Николай: я решил напрямую указать зависимость от loginLayerApp и сразу его включать без доп. загрузки, загружать динамически только html с css.
Оно вроде рендерится, но только один раз. Т.е. бизнес-логика не следит за изменениями и не перерисовывает view, только один раз, когда я явно указываю bootstrap

[Дмитрий]

Николай: надоела эта фигня, решил сразу сделать inject нужной библиотеки и контроллеров, объявив зависимость, а html внедрил как template. Устал бороться с этой чёртовой динамической загрузкой

Answer 2

[ozknemoy]

все просто. при клике открываем кусок дома

<button ng-click="i.show=1">button</button>
<span class="elem_list--descr--footer--item foot1"
                                  ng-if="i.show==1">
                                <i class="icon clock"></i>
                                <span>{{::i.remain}}</span>&thinsp;{{::i._remain}}&nbsp;осталось
                            </span>

вместо спан использовать модальное окошко. плюс можно глянуть ng-bind-html в паре с $sce.trustAsHtml

Comments

[Дмитрий]

Как быть, если в этом модальном окне используется другой контроллер (со своими директивами, фильтрами и сервисами) ?

[ozknemoy]

у контроллера нет директив и тд. имеется ввиду модуль. только вот зачем там модуль? лучше написать компонент/директиву внутри модалки. вот примерчик с рабочего прилоения. это бутстраповская модалка регистрации

×

Войти
Восстановления пароля

















Войти



Забыли пароль?





Для восстановления пароля, пожалуйста введите адрес электроной почты:




 На ваш почтовый ящик отправлено письмо




Восстановить пароль



Вернуться к форме авторизации

[ozknemoy]

оу. не получается в комменте код выложить

[ozknemoy]

у меня на кнопке вызова модалки висит слушатель клика с помощью компонента. при нажатии компонент вызывает модалку со своим контроллером(это особенность бутстрапа для ангулара). получается эдакая независимая страница

[Дмитрий]

ozknemoy: можно писать код в редакторе ниже для ответа на вопрос, а потом его вставлять в комментарии.
Не очень понял, т.е. вы предлагаете перенести всю логику из контроллера в директиву?

У меня сейчас есть отдельная страница регистрации, на которой подгружается модуль LoginLayerApp вместо с контроллером, несколькими директивами и сервисами.
Как это все перенести в одну директиву? Возможно я путаюсь в терминах Angular и не совсем понимаю суть.

[ozknemoy]

пускай модуль грузится как есть. к нему написать компонент-кнопку(или директиву если ангулар старый) . на нее кликаешь и вызывается окно модалки то что в templateUrl написано. и к этой вьюшке идет controller: modalController. модалкак считай как тдельное вью+контроллер. но эта схема возможна ток смодалкой bootstrap/ так как она создает отдельный скоуп

export const loginButtonComponent = {
    controller: function ($element,$uibModal) {
        'ngInject';
        function _click() {
            const config = {
                animation: true,
                templateUrl: 'app/_common/modals/login-button/login-button.html',
                controller: modalController,
                controllerAs: 'lg'
            };
            $uibModal.open(config);
        }

        $element.on('click', _click);

        this.$onDestroy = ()=> {
            $element.off('click', _click);
        }
    }
};

<login-button>клик для открытия модалки. кнопка в области видимости модуля</login-button>

[Дмитрий]

ozknemoy: таким образом не работает, выше описывал ситуацию. Да и грузить библиотеку bootstrap с кучей лишнего ради просто модального окна - все равно что забивать гвоздь лопатой.