Angular.bootstrap引發錯誤

Question

我正在嘗試將我的網站遷移到角度，但是速度很慢。目前的情況是我有一個純HTML登錄頁面，其中有一個鏈接來打開忘記密碼彈出窗口。我已將Forget密碼頁面遷移到Angular。所以我正在做的是當用戶點擊鏈接時，我通過$ .getscript加載角庫，控制器和應用程序，然後執行AJAX調用以在彈出窗口中加載ForgetPassword頁面內容。我可以在控制檯中看到evrything已經裝載了prieperly，但是當我嘗試引導時出現錯誤。請在下面找到我的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

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

Answer 2

我從來沒有使用$.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(); 
      } 
     }); 
    } 
}