Javascript AngularJS中的内联标记

所以我在做这样的事情：

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

---

但他们都不起作用。有什么想法吗？

如评论中所述，您有一些选择，从更差到更好：

首先是使用

$scope.italicOrBold=函数（文本，粗体）{
返回$sce.trustAsHtml（粗体？'Test'：'Test'）；
}

第二是使用，这不是一个太坏的设计

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

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

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

使用ngClass的

.粗体文本{
字体大小：粗体；
}
.文本斜体{
字体：斜体；
}

第三，更好的是，制定一个指令

<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) {
        }
   };
})

甚至更好地使用指令
.directive（'boldMeUp'，function（）{
返回{
模板：“”，
限制：“A”，
替换：正确，
是的，
范围：{
boldMeUp:“=”
},
链接：函数postLink（范围、元素、属性）{
}
};
})

---

为了回答您的评论，我不认为有一种方法可以使用mustache语法创建标记。这不是它的设计方式，（大括号之间的东西）基本上是对controller和的调用。

为什么不使用ngClass？还是ngBindHtml？@florian.-因为我直接在现场做一些计算（在两个ng repeat内），所以我不能使用ng bind html。是的，你可以，只调用一个函数而不是内联if？但这可能不是最好的方法，我可能会选择ngClass或指令。看来你是对的，我确实可以使用ng bind html并将整个内容放在其中。其他这样做的话，是不是没有办法用

{{}

语法创建一个标记？是不是{{{{{{{}而不是{{{{不转义html？（我知道mustache等人就是这样工作的…）我同意，控制器不应该操纵DOM，但是关于

ABC和它的所有历史记录将被删除

？应该有某种语义上的方法来谈论富文本。哈哈，也许是一个减价过滤器。

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

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

<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) {
        }
   };
})