Question

我正在尝试将我的网站迁移到有角度但很慢的角度。目前的情况是我有一个纯HTML登录页面，其中有一个链接可以打开忘记密码弹出窗口。我已将忘记密码页面迁移到Angular。所以我正在做的是当用户点击链接时，我通过$ .getscript加载角度库，控制器和应用程序，然后执行AJAX调用以在弹出窗口中加载ForgetPassword页面内容。我可以在控制台中看到evrything已经加载了prioperly但是当我尝试bootstrap时出现错误。请在下面找到我的JS代码。我在控制台中得到的错误是“ReferenceError：angular is not defined angular.bootstrap（document，['myApp']）;”

     $(document).ready(function () {
        $("#complementary-nav ul li a#popup").bind("click", function () {
            loadfiles(function () {
                OpenPopup();
                angular.bootstrap(document, ['myApp']);
            });
        });
    });
    // Code to open in pop up
    function loadfiles(callback) {
        var scripts = ['/js/angular.min.1.2.9.js', '/js/Controller.js', '/js/application.js'];
        for (var i = 0; i < scripts.length; i++) {
            $.getScript(scripts[i], function () {});
        }
        if (typeof callback === "function") {
            callback();
        }
    }

    function OpenPopup() {
        var url = "/dev/Forgot-Password.aspx";
        $.ajax({
            type: "GET",
            async: false,
            contentType: "charset=UTF-8",
            url: url,
            success: function (data) {
                $("#common-popup").html("").append($(data));
                $("#common-popup_overlay").fadeIn(500);                    
            },
            error: function () {
                console.log("error")
            }
        });
    }

忘记密码HTML看起来像这样

    <div ng-controller="ForgotPasswordController" id="lostPasswwordOverlayContent" class="overlayContent">

<p>
    <label>E-Mail<span class="mandatory">*</span></label>
    <input type="email" ng-class="{'input-error':(_ServerForm.email.$dirty && _ServerForm.email.$error.emailValidate) || (blankSubmit && _ServerForm.email.$invalid)}" ng-model="user.email" email-validate required name="email" placeholder="" maxlength="100" id="EmailAddress" />
    <span class="ui-state-error h5-message" ng-show="(_ServerForm.email.$dirty && _ServerForm.email.$error.emailValidate) || (blankSubmit && _ServerForm.email.$invalid)">
        <span class="h5-arrow"></span>
        <span class="h5-content">Invalid Email</span>
    </span>
</p>

<div class="button buttonSimple buttonRight greenbutton forgotpassword">
    <a name="fgtpassword" id="fgtpassword" href="#" class="" ng-click="submitform($event)"><span>Submit<span class="visual"></span></span></a>
</div>

我已经单独测试了此页面的功能，如果打开一个独立的HTML页面它可以正常工作，而当我尝试进行更改并将其作为弹出窗口打开时，我收到错误

Answer 1

我从未使用$.getScript()，但根据documentation，您可以在脚本到达并执行时提供回调。你为什么不打电话给自己的回调？

function loadfiles(callback) {
    var scripts = ['/js/angular.min.1.2.9.js', '/js/Controller.js', '/js/application.js'];
    var scriptsAlreadyFetched = scripts.length;
    for (var i = 0; i < scripts.length; i++) {
        $.getScript(scripts[i], function () {
          scriptsAlreadyFetched--;
          if (typeof callback === "function" && scriptsAlreadyFetched== 0) {
            callback();
          }
        });
    }
}

Answer 2

@meilke是的，解决方案对我有用。但我找到了另一种方法。我使用modernizr方法来加载JS文件。通过这种方法，我还可以将CSS文件与JS文件一起加载

     $("#complementary-nav ul li a#popup").bind("click", function () {
            loadfiles(function () {
                angular.bootstrap(document, ['myApp']);
            });
        });

     function loadfiles(callback) {
      var modernizrLoad = [{ load: ['//code.angularjs.org/1.2.8/angular.min.js', '/js/application.js', '/js/Controller.js', '/css/Styles_v2.css', '/css/tyles.css'], complete: function () { OpenPopup(callback); } }];
      Modernizr.load(modernizrLoad);
    }

Angular.bootstrap抛出错误

2 个答案: