使用Ionic框架進行天氣應用程序的錯誤

我正在使用離子建立一個天氣應用程序，它幾乎完成。我與風電軸承的一個問題，在JSON數據我們有風向只度，我要使用此代碼，但它不是在當前顯示..使用Ionic框架進行天氣應用程序的錯誤

$scope.windBearing = function(windBearing) { 


     if (windBearing < 11.25 && windBearing > 348.75) 
     return '<img alt="" class="center-block" src="http://meteoiraq.com/img/n.png"style="width: 60px;"><h4 class="text-center">الرياح شمالية</h4>'; 
     else if (windBearing > 11.25 && windBearing < 33.75) { 
     return '<img alt="" class="center-block" src="http://meteoiraq.com/img/nne.png"style="width: 60px;"><h4 class="text-center">الرياح شمالية شمالية شرقية</h4>'; 
     } else if (windBearing > 33.75 && windBearing < 56.25) { 
     return '<img alt="" class="center-block" src="http://meteoiraq.com/img/ne.png"style="width: 60px;"><h4 class="text-center">الرياح شمالية شرقية</h4>'; 
     } else if (windBearing > 56.25 && windBearing < 78.75) { 
     return '<img alt="" class="center-block" src="http://meteoiraq.com/img/ene.png"style="width: 60px;"><h4 class="text-center">الرياح شرقية شمالية شرقية</h4>'; 
     } else if (windBearing > 78.75 && windBearing < 101.25) { 
     return '<img alt="" class="center-block" src="http://meteoiraq.com/img/e.png"style="width: 60px;"><h4 class="text-center">الرياح شرقية</h4>'; 
     } else if (windBearing > 101.25 && windBearing < 123.75) { 
     return '<img alt="" class="center-block" src="http://meteoiraq.com/img/ese.png"style="width: 60px;"><h4 class="text-center">الرياح شرقية جنوبية شرقية</h4>'; 
     } else if (windBearing > 123.75 && windBearing < 146.25) { 
     return '<img alt="" class="center-block" src="http://meteoiraq.com/img/se.png"style="width: 60px;"><h4 class="text-center">الرياح جنوبية شرقية</h4>'; 
     } else if (windBearing > 146.25 && windBearing < 191.25) { 
     return '<img alt="" class="center-block" src="http://meteoiraq.com/img/s.png"style="width: 60px;"><h4 class="text-center">الرياح جنوبية</h4>'; 
     } else if (windBearing > 191.25 && windBearing < 213.75) { 
     return '<img alt="" class="center-block" src="http://meteoiraq.com/img/ssw.png"style="width: 60px;"><h4 class="text-center">الرياح جنوبية جنوبية غربية</h4>'; 
     } else if (windBearing > 213.75 && windBearing < 236.25) { 
     return '<img alt="" class="center-block" src="http://meteoiraq.com/img/sw.png"style="width: 60px;"><h4 class="text-center">الرياح جنوبية غربية</h4>'; 
     } else if (windBearing > 236.25 && windBearing < 258.75) { 
     return '<img alt="" class="center-block" src="http://meteoiraq.com/img/wsw.png"style="width: 60px;"><h4 class="text-center">الرياح غربية جنوبية غربية</h4>'; 
     } else if (windBearing > 258.75 && windBearing < 281.25) { 
     return '<img alt="" class="center-block" src="http://meteoiraq.com/img/w.png"style="width: 60px;"><h4 class="text-center">الرياح غربية</h4>'; 
     } else if (windBearing > 281.25 && windBearing < 303.75) { 
     return '<img alt="" class="center-block" src="http://meteoiraq.com/img/wnw.png"style="width: 60px;"><h4 class="text-center">الرياح غربية شمالية غربية </h4>'; 
     } else if (windBearing > 303.75 && windBearing < 326.25) { 
     return '<img alt="" class="center-block" src="http://meteoiraq.com/img/nw.png"style="width: 60px;"><h4 class="text-center">الرياح شمالية غربية</h4>'; 
     } else { 
     return '<img alt="" class="center-block" src="http://meteoiraq.com/img/nnw.png"style="width: 60px;"><h4 class="text-center">الرياح شمالية شمالية غربية</h4>'; 
     } 
    }

代碼的html

<div>{{windBearing(weatherInfo.currently.windBearing)}}<div>

result

來源

2016-06-11 razak

看起來隊友，你的應用程序設計的很糟糕。 Angular需要編譯html來顯示它。看看這個http://stackoverflow.com/questions/18157305/angularjs-compiling-dynamic-html-strings-from-database因爲它的不好的設計寫一個答案似乎是多餘的。我建議你從函數中返回對象而不是html。我建議你不要在你的視圖中調用你的方法，而是在控制器中調用。之後，在視圖的html中顯示對象數據。 – misha130

使用{{text}}語法進行綁定會插入文本，而不是編譯的HTML，因爲@ misha130會說，所以您會看到標記而不是預期的圖像。

您需要使用ng-bind-html來進行綁定。因此，更換您的div上面以下內容：

<div ng-bind-html="windBearing(weatherInfo.currently.windBearing)"></div>

如果你得到$sce:unsafe錯誤，這意味着你首先需要消毒的HTML。做到這一點，包括一個腳本角衛生和注入ngSanitize到你的模塊。

來源

2016-06-11 11:25:32

使用Ionic框架進行天氣應用程序的錯誤

回答

相關問題