在 window.onload 事件上初始化 angular

Question

在第三方框架中，可以通过提供 javascript 代码来修改 html 页面，该代码将由框架添加到 window onload。从它们的内容可以写入AddIn div元素。

如何将 angular 应用程序注入此 div 元素 (HTML + js)。

<!DOCTYPE html>
<html>
  <head>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript">
      window.onload=function() { 
        //todo add js code here
      }
      </script>
  </head>
  <body>
    <div id="AddIn"></div>
  </body>
</html>

我可以添加 html

$('#AddIn').append("<div ng-app='dropboxApp' ng-controller='dropboxController as dropbox'>{{dropbox.label}}</div>");

但我不确定在哪里添加我的 angular 初始化代码，并让事情正常进行

angular.module('dropboxApp', [])
                .controller('dropboxController', function () {
                    var dropbox = this;
                    dropbox.label = 'hello angular';
                });

Answer 1

您可以在页面上延迟初始化您的应用程序，而不是在页面上使用 ng-app 指令。 html 注入后，您可以使用 angular.bootstrap 方法在您的页面上初始化 angular，基本上采用 DOM 然后在数组中需要模块名称。

执行此操作时，您需要在 angular 引用后将所有 angular 组件文件添加到页面本身。它们应该在您 bootstrap 页面上的应用程序之前初始化。

window.onload=function() { 
    $('#AddIn').append("<div ng-controller='dropboxController as dropbox'>{{dropbox.label}}</div>");
    //add angular html first
    //then run angular on the page using angular.bootstrap.
    angular.bootstrap($('#AddIn'), ['demo']);
}

Note: Load jQuery before angular to get jQuery compiled DOM instead of get jQLite compiled DOM.

Answer 2

除了 Pankaj 答案，您还可以使用 Angular $window

$window.onload = function (){}

在 window.onload 事件上初始化 angular

initialize angular on window.onload event

javascript

onload

angularjs