How to dynamically load the pop-up window in AngularJS?

Question

Web project: backend - ASP.NET, frontend - AngularJS.

I have the "main page" with mainApp module. Also i have the another page with the registration, which is the responsibility of LoginLayerApp.

What i want: when you click on "main window" i need pop-up window with the registration content (html, css, angularController and so on).

What was tried:

1. Loaded using JQuery, implement the DOM and call angular.bootstrap by hands.
2. Loaded via $http and using ngDialog library to open a pop-up window.
3. Use the iframe.

The problem is that the loaded naked HTML, but I do not know how to inject LoginLayerApp, to then rebuild the naked HTML. I can do it only once, but not as usual, when angular always rebuild view by changes in controller (for example, different ng-class depending on the width of the screen).

How to do the most right? Perhaps I should do differently to organize something?

RequireJS, WebPack will not work, too much legacy-project implementation for such a trifle.

Example of registration page:

 @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> } 

Answer 1

I'm not sure, but you can try to create component, that will show your errors. By default set in invisible. In controllers you can manage how many and when you should show your error messages.

Answer 2

What I would do is create the modal window (pop-up window) as a angular-ui modal. ( their modal docs ). That way you don't have to write your own modal code.

When you implement it, the modal will get its own controller and its own html file and the implementation will look like this:

Current Controller-

appName.controller('loginLayerController', ["$scope","uibModal", function ($scope, $uibModal){
 $scope.openComponentModal = function () {
 var modalInstance = $uibModal.open({
  templateUrl: 'myModalContent.html',
  controller: 'myModalController',
  controllerAs: 'myModalController'
  }
});
 }])

And from there you can put your form into myModalContent.html, and hide and show buttons there accordingly