Question

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

如何将角度应用程序注入此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.module('dropboxApp', [])
                .controller('dropboxController', function () {
                    var dropbox = this;
                    dropbox.label = 'hello angular';
                });

Answer 1

您可以在页面上懒惰地初始化您的应用，而不是在页面上使用ng-app指令。在html注入之后，您可以使用angular.bootstrap方法在页面上初始化角度，这基本上需要DOM＆amp;然后在数组内部，它需要模块名称。

执行此操作时，您需要在角度参考后在页面上添加所有角度组件文件。应在页面上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']);
}

注意：在angular之前加载jQuery以获取jQuery编译的DOM而不是获取jQLite编译的DOM。

Answer 2

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

$window.onload = function (){}

在window.onload事件上初始化角度

2 个答案: