可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

In a thirth party framework, A html page can be modified by providing javascript code that will be added by the framework to the window onload. From their content can be written to the AddIn div element.

How could I inject a angular application into this div element (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>

I can add the html

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

but I am not sure where to add my angular init code, and get things working

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

回答1:

You could lazily initialize your app on the page instead of using ng-app directive on page. After you html injection you could initialize angular on your page using angular.bootstrap method basically which takes DOM & then inside array it needs module name.

While doing this you need to add your all the angular component files on the page itself after angular reference. They should be initialized before you bootstrap the app on the page.

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