Question

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

我有＆＃34;主页＆＃34;使用mainApp模块。此外，我还有另一个注册页面，这是LoginLayerApp的责任。

我想要什么：当你点击＆＃34;主窗口＆＃34;我需要弹出窗口注册内容（html，css，angularController等）。

尝试了什么：

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

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

如何做到最好？也许我应该采取不同的方式组织一些事情？

RequireJS，WebPack将无法运行，遗留项目实施太多了。

注册页面示例：

＆＃13;

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

＆＃13;

Answer 1

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

Answer 2

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

当你实现它时，模态将获得自己的控制器和它自己的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，并相应地隐藏和显示按钮

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

2 个答案: