我在$ window.open命令的帮助下打开新窗口,并将html内容写入该窗口。
这是Javascript代码:
var test = angular.module('test', []);
test.controller('testController', ['$compile', '$scope','$window', function($compile, $scope, $window) {
$scope.openWindow = function() {
$window.open('', '_blank', 'width=500,height=400').document.write($("#report").html());
};}]);
这是我写到新窗口的内容:
<div ng-app="test" id = "report" ng-controller="testController">
<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
<hr/>
<button ng-click="openWindow()">push!</button>
</div>
这是工作的小提琴。
问题是我在新打开的窗口中看不到glyphicon图标。
知道为什么我看不到glyphicon图标吗?
您的代码中有两个错误。首先,您没有正确包含CSS。您应该使用href
属性而不是rel
属性来包含css。其次,integrity
如果您要从外部包含引导程序,则必须使用密钥检查。
正确的包含是:
var test = angular.module('test', []);
test.controller('testController', ['$compile', '$scope','$window', function($compile, $scope, $window) {
$scope.openWindow = function() {
var content = $("#report").html();
var html = '<html><head><title>hi</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"></head><body>'+content+'</span></p></body></html>'
$window.open('', '_blank', 'width=500,height=400').document.write(html);
};}]);
和更新的小提琴:http : //jsfiddle.net/d8atdw0t/283/
如果您希望从项目中引用样式表,则可以加载带有查询参数(如)的页面模板http://yoursite.com/page.html?window=true
,然后在$window
加载时指定带有查询参数的url。
$window.open('http://yoursite.com/page.html?window=true', '_blank', 'width=500,height=400');
如果存在查询参数,则可以限制加载模板文件的方式(例如,从后端),从而可以加载模板文件。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句