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

Question

网络项目:后端- ASP.NET，前端- AngularJS。

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

我想要的:当你点击“主窗口”，我需要弹出窗口的注册内容(html，css，angularController等)。

所作的尝试：

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

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

如何做最正确的选择？也许我应该做些不同的事情来组织一些事情？

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

我要做的是创建模态窗口(弹出窗口)作为一个角用户界面模式。(他们的模态文档)。这样你就不用写自己的模态代码了。

当您实现它时，该模型将得到自己的控制器和自己的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

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