如何在Angularjs指令中呈现html？

Question

我试图使自定义指令显示：

Will {{selectedAsset}} go {{red}} or {{green}}？ 

它看起来像这样在屏幕上：

AUD/USD will down(red color) or up(green color)? 

的{{红}}和{{绿}}部分应该有它的自己的颜色。因此我试图用一个具有所需类的跨度来包装它。

但它不工作，下面是代码：

<trade-header selected-asset="selectedAsset" red="widgetMessage.goDown" green="widgetMessage.goUp"></trade-header> 

var widgetMessage = { 
    "Trade_Header": "Will {{selectedAsset}} go {{red}} or {{green}}？", 
    "goUp": "up", 
    "goDown": "down"} 

myApp.directive("tradeHeader", function($sce) { 
    return { 
     restrict: "AE", 
     scope: { 
      selectedAsset: "=", 
      green:"=", 
      red:"=" 
     }, 
     link: function(scope, element, attrs) { 
      scope.green = $sce.trustAsHtml('<span class="goOrDonwLabel upGreen">' + scope.green + '</span>'); 
     }, 
     template: widgetMessage.Trade_Header, 
    } 
}); 

widgetMessage.Trade_Header需要是可变的事业设计。

这后果将是：？"AUD/USD will down or <span class="Green">up</span>？“

我需要它被编译为HTML，有什么建议

Answer 1

你的HTML应该是在模板当你试图在代码操作HTML，这通常是你不使用模板的正确方法的标志尝试是这样的：

<trade-header selected-asset="selectedAsset" red="widgetMessage.goDown" green="widgetMessage.goUp"></trade-header> 


var widgetMessage = { 
"Trade_Header": 'Will {{selectedAsset}} go {{red}} or <span ng-class="greenLabel">{{green}}</span>?', 
"goUp": "up", 
"goDown": "down"} 

myApp.directive("tradeHeader", function($sce) { 
return { 
    restrict: "AE", 
    scope: { 
     selectedAsset: "=", 
     green:"=", 
     red:"=" 
    }, 
    link: function(scope, element, attrs) { 
     scope.greenLabel = widgetMessage.goUp; // logic for setting green's class here 
    }, 
    template: widgetMessage.Trade_Header, 
} 
});