javascript - AngularJS 中的内联标签

Question

所以我正在做这样的事情:

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

但众所周知，事情并不总是那么顺利。当我在内联代码中包含一个“标签”时，AngularJS 似乎完全忽略了整个事情并呈现了源代码。

我试过了

"\<b>.....

和

"<b>...

但他们都没有工作。有什么想法吗？

Answer 1

如评论中所述，恕我直言，您有几个选择，从坏到好:

首先是使用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 demo

为了回答您的评论，我认为没有办法使用 mustache 语法创建标签，这不是它的设计方式，expressions (花括号之间的东西)基本上是对 Controller 和 controllers shouldn't be used to manipulate DOM 的调用.