Question

我正在尝试制作自定义指令：

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

屏幕上显示如下：

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

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

但它不起作用，下面是代码：

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

如何在Angularjs指令中呈现html？

1 个答案: