Inline-Tags in AngularJS

Question

So etwas wie dies ich tue:

{{someFlag ? "<b>Bold Text</b>" : "<i>Italic Text</i>"}} 

Aber wie jeder weiß, die Dinge nicht immer so glatt gehen. Als ich ein "Tag" in den Inline-Code einfügte, schien AngularJS das Ganze komplett zu ignorieren und den Quellcode zu rendern.

Ich versuchte

"\<b>..... 

und

"<b>... 

aber beide funktionierten nicht. Irgendeine Idee?

Answer 1

Wie in den Kommentaren geschrieben, Sie haben ein paar Optionen, von schlechter besser imho:

Zuerst ist ngBindHtml

<div ng-bind-html="italicOrBold('With ngBindHtml', someFlag)"></div> 

$scope.italicOrBold = function(text, bold){ 
    return $sce.trustAsHtml(bold ? '<b>Test</b>' : '<i>Test</i>'); 
} 

Zweite ngClass zu verwenden ist zu verwenden, was auch nicht schlecht ist

Design

<div ng-class="{'text-bold' : someFlag, 'text-italic' : !someFlag}">With ngClass</div> 

.text-bold{ 
    font-weight:bold; 
} 

.text-italic{ 
    font-style:italic; 
} 

und drittens und besser machen, eine Richtlinie

<div bold-me-up="someFlag">Or even better with a directive</div> 

.directive('boldMeUp', function(){ 
    return { 
     template: '<div ng-class="{\'text-bold\' : boldMeUp, \'text-italic\' : !boldMeUp}" ng-transclude></div>', 
     restrict: 'A', 
     replace: true, 
     transclude: true, 
     scope: { 
      boldMeUp: '=' 
     }, 
     link: function postLink(scope, element, attrs) { 
     } 
    }; 
}) 

Plunker demo

Und Ihren Kommentar zu beantworten, ich glaube nicht, es gibt ein Weg-Tag mit Schnurrbart erstellen Syntax es ist einfach nicht so, wie es konzipiert wurde, expressions (das Ding zwischen geschweiften Klammern) ist grundsätzlich Anrufe an Controller und controllers shouldn't be used to manipulate DOM.