角 - 通过不同的帧添加HTML每帧一个模块 [英] Angular - append html through different frames with one module per frame
问题描述
我的code有主车前窗和一个iframe和每一个与你的模块。在主窗口中触发一个按钮点击事件应该追加HTML放到iframe中，当追加到所应适用的拦截器和指令正确，但它不工作的新的HTML！
角的javascript：
My code have the main windonw and one iframe and each one with your module. A button in main window fires click event that should append html into iframe, the new html when appended into that should apply interceptors and directives properly, but it doesn't work! Angular javascript:
angular.module('module1',[]).controller('Controller1', function ($scope) {
$scope.get = function(){
$http.jsonp("some_url_here").success(function(html){
$scope.content = html;
});
}
}).directive('click', function($compile) {
return {
link: function link(scope, element, attrs) {
element.bind('click',function(){
var unbind = scope.$watch(scope.content, function() {
var div=document.getElementById("frame").contentWindow.angular.element("divId");
div.append($compile(scope.content)(div.scope()));
unbind();
});
});
}
}
});
angular.module('module2',[]).directive('a', function() {
return {
restrict:'E',
link: function(scope, element, attrs) {
console.log('ping!');
console.log(attrs.href);
}
};
});
HTML code：
Html code:
<html ng-app="modile1">
<div ng-controller="Controller1">
<button type="button", ng-click="get('any_value')", click:""/> Load frame
</div>
<iframe id="frame" src="/please/ignore/this">
<!-- considere the html as appended from iframe-src and contains ng-app="module2" -->
<html ng-app="module2">
<div id="divId">
<!-- code should be inject here -->
</div>
</html>
</iframe>
</html>
请，那considere angularjs，jQuery的（如果适用），模块声明以及头被正确加载。
Please, considere that angularjs, jquery if applicable, modules-declaration as well as headers are loaded properly.
我想从主帧/窗口中的HTML内容加载到iframe和运行拦截器和指令正常。可能吗？如果是的话，我该怎么办呢？
I'd like to load the html content from main-frame/window into iframe and run interceptors and directives properly. Is it possible? If yes, how can I do it?
感谢前进！
推荐答案
我已经试过这code和它似乎做工精细！我发现在这里： HTTP：//www.snip2$c$c。 COM /摘录/ 50430 /角引导
I've tried this code and it seems work fine! I found it here: http://www.snip2code.com/Snippet/50430/Angular-Bootstrap
var $rootElement = angular.element(document.getElementById("frame").contentWindow.document);
var modules = [
'ng',
'module2',
function($provide) {
$provide.value('$rootElement', $rootElement)
}
];
var $injector = angular.injector(modules);
var $compile = $injector.get('$compile');
$rootElement.find("div#divId").append(scope.content);
var compositeLinkFn = $compile($rootElement);
var $rootScope = $injector.get('$rootScope');
compositeLinkFn($rootScope);
$rootScope.$apply();
这篇关于角 - 通过不同的帧添加HTML每帧一个模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
