tagi wbudowane w angularjs

Question

Więc robię coś takiego:

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

Ale jak każdy wie, rzeczy nie zawsze idzie tak gładko. Kiedy umieściłem "znacznik" w wbudowanym kodzie, AngularJS wydaje się całkowicie ignorować całość i renderować kod źródłowy.

Próbowałem

"\<b>..... 

i

"<b>... 

ale oboje nie działa. Dowolny pomysł?

Answer 1

Jak pisał w komentarzach, masz kilka opcji, od gorszego do lepszego IMHO:

Pierwszy jest użycie 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>'); 
} 

drugie jest użycie ngClass, która nie jest tak źle projekt

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

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

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

i po trzecie i lepiej zrobić dyrektywę

<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

I odpowiedzieć na komentarz, nie sądzę, istnieje sposób, aby utworzyć tag z wąsami składnia to po prostu nie sposób, w jaki został zaprojektowany, expressions (rzeczą pomiędzy klamrami) są w zasadzie połączenia z kontrolerem i controllers shouldn't be used to manipulate DOM.