在初始化window.onload事件角 [英] initialize angular on window.onload event
问题描述
在一个thirth会谈框架，HTML页面可以通过提供的JavaScript code将由框架窗口的onload可以添加修改。从他们的内容可写入的AddIn div元素。
我怎么能注入角应用到这个div元素（HTML + JS）。
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆所述; SCRIPT SRC =http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =HTTP：//$c$c.jquery.com/jquery-2.1.4.min.js＆GT;＆下; /脚本＆GT;
＆LT;链接rel =stylesheet属性HREF =style.css文件/＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
在window.onload =函数（）{
// TODO添加JS code在这里
}
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV ID =外接程序＆GT;＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
我可以添加HTML
$（'＃的AddIn'）追加（＆LT; DIV NG-应用='dropboxApp'NG控制器='dropboxController如Dropbox的'＆GT; {{dropbox.label} }＆LT; / DIV＆gt;中）;
但我不知道在哪里加我的角度初始化code和得到的东西的工作。
angular.module（'dropboxApp'，[]）
.controller（'dropboxController'，函数（）{
VAR的Dropbox =这一点;
dropbox.label ='你好角;
}）;
您可以懒洋洋地初始化，而不是使用 NG-应用指令页面上的应用程序在页面上。在您HTML注入，你可以使用初始化基本上 angular.bootstrap 方法，需要 DOM ＆放你的页面上的角;然后里面阵列需要的模块名称。
虽然这样做，你需要参考角后添加页面本身上的所有角组件文件。他们应该在你面前被初始化引导页面上的应用程序。
的window.onload =函数（）{
$（'＃的AddIn'）追加。（＆LT; DIV NG控制器='dropboxController作为Dropbox的'＆GT; {{dropbox.label}}＆LT; / DIV＆gt;中）;
//先加角HTML
//然后运行使用angular.bootstrap在页面上棱角分明。
angular.bootstrap（$（'＃的AddIn），['示范']）;
}
注意：前角加载jQuery来获得jQuery的编译而不是GET jQLite编译DOM DOM
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'; });
解决方案You could lazily initialize your app on the page instead of using
ng-appdirective on page. After you html injection you could initialize angular on your page usingangular.bootstrapmethod basically which takesDOM& 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
bootstrapthe 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']); }
Note: Load jQuery before angular to get jQuery compiled DOM instead of get jQLite compiled DOM.
这篇关于在初始化window.onload事件角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
