如何在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, 
} 
});