Angular.bootstrap拋出錯誤

Question

我正在嘗試將我的網站遷移到有角度但緩慢的地方。 當前情況是我有一個普通的HTML登錄頁面，其中有一個打開忘記密碼彈出窗口的鏈接。 我已經將“忘記密碼”頁面遷移到了Angular。 因此，我要做的是，當用戶單擊鏈接時，我通過$ .getscript加載了角度庫，控制器和應用程序，然后執行AJAX調用以在彈出窗口中加載ForgetPassword頁面內容。 我可以在控制台中看到evrything已裝載prioperly，但嘗試引導時出現錯誤。 請在下面的JS代碼中找到。我在控制台中遇到的錯誤是“ ReferenceError：未定義angular 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()但是根據文檔，您可以在腳本到達並執行后提供回調。 那為什么不調用自己的回調呢？

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);
    }