Question

所以我做了这样的事情：

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

但众所周知，事情并不总是那么顺利。当我加入＆＃34;标签＆＃34;在内联代码中，AngularJS似乎完全忽略了整个事情并呈现了源代码。

我试过

"\<b>.....

和

"&lt;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 demo

为了回答你的评论，我认为没有办法用胡子语法创建标签，这不是它的设计方式，expressions（花括号之间的东西）基本上是对控制器的调用和controllers shouldn't be used to manipulate DOM。

AngularJS中的内联标记

1 个答案: