如何在AngularJS中动态加载弹出窗口？

Question

Web 项目：后端 - ASP.NET，前端 - AngularJS。

我有带有 mainApp 模块的“主页”。 我还有另一个注册页面，这是 LoginLayerApp 的责任。

我想要什么：当你点击“主窗口”时，我需要带有注册内容（html、css、angularController 等）的弹出窗口。

尝试了什么：

1. 使用 JQuery 加载，实现 DOM 并调用 angular.bootstrap 手。
2. 通过$http加载并使用ngDialog库打开一个弹出窗口 窗口。
3. 使用 iframe。

问题是加载了裸HTML，但我不知道如何注入LoginLayerApp，然后重建裸HTML。我只能做一次，但不像往常那样，当角度总是通过控制器的变化重建视图时（例如，不同的 ng-class 取决于屏幕的宽度）。

怎么做最合适？也许我应该采取不同的方式来组织一些事情？

RequireJS，WebPack 将无法工作，对于这样的小事太多的遗留项目实现。

注册页面示例：

@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

我要做的是将模态窗口（弹出窗口）创建为angular-ui 模态。 (their modal docs)。这样您就不必编写自己的模态代码。

当你实现它时，modal 会得到它自己的控制器和它自己的 html 文件，实现看起来像这样：

当前控制器-

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

然后您可以将表单放入 myModalContent.html，并在此处相应地隐藏和显示按钮

Answer 2

我不确定，但您可以尝试创建组件，这将显示您的错误。默认设置为不可见。在控制器中，您可以管理应该显示错误消息的数量和时间。