AngularJS: ng-bind-html kaldırmayı kaldır

Question

Uygulamamda table ve ng-repeat kullanıyorum. Benim veri işleme ediyorum, sütunların biri yardımıyla oluşturulur:

<div class="cell" data-ng-bind-html="article.Content"> 
</div> 

Ama içerik gibi varsa, bir sorun var: O zaman bütün stili (kırar

<div class="page-wrap">123</div> 

Çünkü sayfada sayfa sargısı var).

Bu html oluşturmak için gerçek, ancak stil ve css stili oluşturmadan gerçek mi? Ve nasıl?

gibi:

<div>123</div> 

Answer 1

Ne diyorsun article.Content aslında HTML içerdiğini ve Açısal HTML etiketlerinin tüm dışarı sıyırma olmasıdır inanıyoruz.

Kodunuz, istediğiniz şeyi size ulaştırmaya yakın, ancak içeriğin HTML ile içeriğini 'güvenli' olarak işaretlemek için $ sce hizmetini kullanmanız gerekir. Bunu yapmanın basit bir yolu bu filtreyi kullanmaktır.

app.filter('trustAsHtml', function($sce) { return $sce.trustAsHtml; }); 

Sonra sınıfları çıkarılmasını isteyip bu filtreyi kullanın:

app.filter('stripClasses', function() { 
    return function(str) { 
    return str.replace(/class=['"].*["']/, ''); 
    } 
}); 

.Kapağı() işlevi Ne istediğini düşünüyorum içerikten herhangi class="whatever", çıkarır.

GÜNCELLEME: Benzer şekilde, bu herhangi bir satır içi stilleri atmak için kullanılabilir. Ne olursa olsun öneki

app.filter('stripStyles', function() { 
    return function(str) { 
    return str.replace(/style=['"].*["']/, ''); 
    } 
}); 

(Uygulamanız için çalışıyor olursa olsun filtre tanımların app. bölümünü değiştirmek gerekir Kullanımı/Eğer (senin .controller için kullandığınız yöntem) çağırır)

Eğer şerit için birçok stili veya sınıfları varsa, olduğu regex olmayan açgözlü sürümü için gitmeli.

Her iki sınıf ve stil çıkarılması için,

<div class="cell" data-ng-bind-html="article.Content | stripClasses | trustAsHtml"></div> 

Veya:

Sonra senin data-ng-bind-html="article.Content" Buna değiştirecek

<div class="cell" data-ng-bind-html="article.Content | stripStyles | stripClasses | trustAsHtml"></div> 

Ben another answer için yaptığım This Plunk sen ve trustAsHtml filtreyi nasıl kullanabileceğini göstermektedir $ sce hizmetini bir denetleyicide nasıl kullandığınızı gösterir.