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

Question

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

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

我想要什么:当你点击“主窗口”时，我需要弹出窗口，其中包含注册内容(html、css、angularController 等)。

尝试过什么:

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

问题是加载了裸HTML，但我不知道如何注入(inject)LoginLayerApp，然后重建裸HTML。我只能执行一次，但不能像往常一样，当 Angular 总是通过 Controller 的更改来重建 View 时(例如，根据屏幕宽度不同的 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)。这样您就不必编写自己的模式代码。

当你实现它时，模态将获得自己的 Controller 和自己的 html 文件，实现将如下所示:

电流 Controller -

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

从那里您可以将表单放入 myModalContent.html 中，并相应地隐藏和显示按钮