AngularsJS如何將字符串傳遞給指令？

我一直在嘗試將字符串值傳遞給指令，但它似乎只接受整數或浮點數。AngularsJS如何將字符串傳遞給指令？

這是代碼：

app.directive('oodaBar', function(){ 
    return { 
     restrict: 'EA', 
     scope: { 
      total: '=total', 
      value: '=value', 
      width: '=width', 
      tcolor: '=tcolor', 
      vcolor: '=vcolor' 
     }, 
     templateUrl: 'partials/ooda-bar.html' 
    };

OODA-一個bar.html：

<svg width="{{width + 25}}" height="50"> 
<rect x="25" width="{{width}}" height="19" fill="#{{tcolor}}"></rect> 
<rect x="25" width="{{width * (value/total)}}" height="19" fill="#{{vcolor}}"></rect> 
<line x1="{{width + 25}}" y1="19" x2="{{width + 25}}" y2="38" stroke="#333" /> 
<line x1="{{width * (value/total) + 25}}" y1="19" x2="{{width * (value/total) + 25}}" y2="38" stroke="#333" /> 
<text x="{{width * (value/total) - 5 + 25}}" y="40" fill="#333" style="direction:rtl">{{value}}</text> 
<text x="{{width - 5 + 25}}" y="40" fill="#333" style="direction:rtl">{{total}}</text> 
</svg>

我加入這顯示它：

<ooda-bar width="500" total="100" value="60" tcolor="333" vcolor="ffc000"></ooda-bar>

的問題是，我得到了這在瀏覽器中：

<svg width="525" height="50"> 
<rect x="25" width="500" height="19" fill="#333"></rect> 
<rect x="25" width="300" height="19" fill=""></rect> 
<line x1="525" y1="19" x2="525" y2="38" stroke="#333"></line> 
<line x1="325" y1="19" x2="325" y2="38" stroke="#333"></line> 
<text x="320" y="40" fill="#333" style="direction:rtl">60</text> 
<text x="520" y="40" fill="#333" style="direction:rtl">100</text> 
</svg>

正如你可以看到第二個矩形在「填充」中沒有任何價值。

如何傳遞包含顏色代碼的字符串值？

來源

2015-09-17 Burawi

在指令作用域對象中使用了錯誤的操作符。嘗試使用'@'而不是'='。如果你是屬性中的硬編碼值，則不存在2路綁定 – charlietfl

是的，應該使用@作爲單路綁定。 =用於雙向綁定。 –

無論哪種情況，傳遞給指令的值都應該是可評估的表達式。 '333'因爲它計算爲一個整數而起作用。但是'FFc000'不會評估爲字符串，它會嘗試將其評估爲變量名稱，該變量名稱不存在於名稱空間中，因此結果爲「未定義」。如果要綁定到字符串文字，請將帶引號的字符串文字放入屬性中，如下面的回答下面的答案所示。 –

我嘗試兩種解決方案：

由1- tcolor和vcolor 2 - 變「=」被「@」用引號括起來

都工作的價值，而是根據@ ste2425的解決方案Seconde系列是不好的做法，所以選擇了第一個。

感謝@charlietfl和@Diana R

來源

2015-09-17 14:48:12 Burawi

通常字符串必須用單引號：

<ooda-bar width="500" total="100" value="60" tcolor="333" vcolor="'ffc000'"></ooda-bar>

更新從@ ste2425基礎上添加註釋解釋：

「硬編碼字符串應包含在第二對引號，加倍與否，因爲角度會認爲你指的是一個範圍變量，否則試圖對它進行綁定，但也應該提到，在你的視圖中加入硬編碼值是非常糟糕的做法「

來源

2015-09-17 13:19:22

爲什麼這會降低投票率？這是正確的解決方案，即使它沒有解釋爲什麼。 –

這應該不是已經被低估了，它回答了這個問題。硬編碼的字符串應該用第二對引號括起來，因爲angular會認爲你引用了scope變量，然後嘗試對它執行綁定。但是，它也應該提到，在你的觀點中使用硬編碼值是非常糟糕的做法。如果您在視圖中硬編碼值，小貓和小象將會死亡。 – ste2425

@ ste2425感謝您的解釋 –

AngularsJS如何將字符串傳遞給指令？

回答

相關問題