2016-06-14 2 views
2

Я открываю новое окно с помощью команды $ 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> 

И здесь работает fiddle.

Проблема в том, что я не вижу иконки глификона в новом открывшемся окне.

Любая идея, почему я не вижу значки глификона?

ответ

4

В коде есть две ошибки. Сначала вы не включаете 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'); 

В зависимости, как вы загрузите файл шаблона (от внутреннего интерфейса, например), вы можете ограничить, чтобы загрузить файл шаблона если параметр запроса не существует.

+0

thanks.But что, если я хочу сделать ссылку на таблицу стилей из моего проекта, а не из Интернета? – Michael

+0

Проверьте измененный ответ. –

3

Ваша ссылка неверна в html, которую вы нажимаете в новом окне. Используйте вместо

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

Обновлена ​​скрипка here

Смежные вопросы