html oluşturan açısal filtre

Question

Gerçek bir değer yerine bir (önyükleme) simgesi ekleyen küçük bir açısal filtre var. O inşaat ama html kodlanmış:

var conApp = angular.module('conApp', []); 
    conApp.filter('trueIcon', function($filter){ 
    return function(booleanValue){ 
     return booleanValue ? '<i class="icon-ok"></i>' : ''; 
    } 
    }); 

i html kodunu çözmek için başka bir filtre uygulamak zorunda mı? Bunu yapmanın "açısal" bir yolu var mı?

Answer 1

html oluşturmak için ng-bind-html kullanmanız gerekir.

<span ng-bind-html="foo | trueIcon"></span> 

Bu, bunun gerçekten filtreler için geçerli olmadığını söyledi. Filtreler, görünümün/DOM'ın kendisinin öğelerini oluşturmaktan ziyade bir görünüme yazılan verileri ovalamak için daha fazladır. Muhtemelen bunun için bir yönerge oluşturarak daha iyi olacak:

app.directive('trueIcon', function() { 
    return { 
     restrict: 'E', 
     template: '<i ng-class="{\'icon-ok\': value, \'icon-not-okay\': !value}"></i>', 
     scope: { 
     value: '=' 
     } 
    }; 
}); 

<true-icon value="foo"></true-icon> 

Answer 2

angularjs varsayılan olarak ifade değerlendirme sonuçlarını hijyenin sağlanmasıdır. (NgSanitize modülden)

• http://docs.angularjs.org/api/ngSanitize.directive:ngBindHtml (potansiyel güvenlik riskleri açılır gibi ben bunu tavsiye etmem)
• http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe: 2 seçeneğiniz var biçimlendirme olarak HTML görüntülemek için.

Yukarıdakiler filtrelemenizi yaparken, belki de bunu bir yönerge haline getirmeyi düşünmelisiniz?