$ window.open 명령을 사용하여 새 창을 열고 창에 html 내용을 씁니다.
다음은 자바 스크립트 코드입니다.
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 아이콘을 볼 수 없다는 것입니다.
왜 내가 글 리피 콘 아이콘을 볼 수 없는지 아십니까?
코드에 두 가지 오류가 있습니다. 먼저 CSS를 올바르게 포함하지 않았습니다. CSS를 포함하려면 href속성 대신 rel속성을 사용해야합니다 . 둘째 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] 삭제
몇 마디 만하겠습니다