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

柱塞演示

為了回答您的評論，我不認為有一種使用胡須語法創建標簽的方法，而不僅僅是設計方法， 表達式 （大括號之間的東西）基本上是對控制器的調用， 不應使用控制器操縱DOM 。