표시 할 사용자 지정 지시문을 만들려고합니다.
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로 컴파일해야합니다. 제안 사항이 있습니까?
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,
}
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다