AngularJS中的内联标记

Question

所以我做的是这样的:

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

但众所周知,事情并不总是那么顺利.当我在内联代码中包含"标记"时,AngularJS似乎完全忽略了整个事物并呈现了源代码.

我试过了

"\<b>.....

和

"<b>...

但他们都没有用.任何的想法？

Answer 1

正如评论中所述,您有一些选择,从更糟糕到更好的imho:

首先是使用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>');
}

其次是使用ngClass,这不是一个太糟糕的设计

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

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

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

第三个也是更好的,做出指示

<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演示

并回答您的意见,我不认为有一种方式来创建与小胡子的语法,它只是没有办法的办法,已设计,标签表达式(花括号之间的事情)基本上都是调用控制器和不应该使用的控制器操纵DOM.