IE8 PRE Etiket Sorunları

Question

Benzer satırlarda bulunan diğer tartışmaya da değindim. İşte bu tartışma için bir link.

code inside pre goes in one line on IE8

dış HTML çalışıyor. Ama benim ihtiyacım iç HTML için. Dış HTML kullanmamanın nedeni, HTML'nin kendisinde bulunan koşulları içeren AngularJS kullanıyorum. Bu yüzden içeriği innerHTML'ye eklemem gerekiyor.

İşte HTML.

<p ng-show="preview=='text' && !file.showUploadPanel && file.fileContent!='null' && file.fileContent!='undefined'" ng-bind-html-unsafe="file.fileContent" class="pre fileContent"></p> 

İşte onu destekleyen JS.

var elem = $(".pre.fileContent")[1]; 
if (elem.tagName == "P" && "innerHTML" in elem){ 
    elem.innerHTML = "<pre>" + elem.innerHTML + "</pre>"; 
} 

Ben de burada "<pre>" + $scope.file.fileContent + "</pre>";

sonuçlanır IE8 biniyorum hatadır kapsamı değişkenle "<pre>" + elem.innerHTML + "</pre>" değiştirilmesi denedim. Ben elem.innerHTML den <pre> kaldırırsanız

Error: Unknown runtime errorundefined 

hata oluşmaz. Ayrıca, dışHTML için bu hata gösterilmez.

Bunu nasıl çözerim?

Answer 1

İçeriği bir pre öğesinde sarmaya çalışıyorsunuz gibi görünüyor mu? Eğer öyleyse, sadece bu yapabilirdi:

var pre = document.createElement('pre'); 
while(elem.firstChild) pre.appendChild(elem.firstChild); 
elem.appendChild(pre); 

Bu, herhangi bir özellik değerlerini ve olay işleyicileri tutmak avantaj vardır. içeride, ben <pre> olması geçerli olduğunu sanmıyorum, bir blok düzeyinde eleman - CSS çözüm daha iyi olabilir:

white-space:pre; 
font-family:monospace; 

DÜZENLEME:

Alternatif olarak, sadece ilgili elemana CSS geçerli olabilir <p> etiketi.

Answer 2

Üzgünüm paragraf sınıf seçici ile karıştı,

<p> etiket yukarıdaki sınıf ".pre" ve ".filecontent" ve "(seçici $ ile çalışıyoruz hem de içerir

<p ng-show="preview=='text' && !file.showUploadPanel && file.fileContent!='null' && file.fileContent!='undefined'" ng-bind-html-unsafe="file.fileContent" class="pre fileContent"></p> 

. Önceden .fileContent ")" .fileContent "sınıfına sahip öğeyi" .pre "sınıfı olan bir öğenin içinde arar.

Sadece doğru ya da yanlış yazıldığından emin olmak istiyorum. :)

Çözüm:

metin alanına veya kaynak kabın içindeki içeriği alın, tüm dizi elemanlarına <p> etiket eklemek "\ n" ile ve bir döngü ile dize bölün.

var textVal = jQuery("#wmd-input").val(); 
textVal = textVal.split("\n"); 
var temp = ""; 
for (var i=0; i < textVal.length; i++) { 
    temp += "<p>" + textVal[i] + "</p>"; 
} 

/* Assing the temp html in your target div or container*/ 

Answer 3

Aslında cevabı kendim de buldum. AngularJS kullanırken ng-bind-html-unsafe yanlış yönergesini kullandım.ng-bind-html-unsafe'u ng-bind'a değiştirdim, sonra problemim çözüldü!

Bana yardım ettiğin için herkese teşekkürler!