Ошибка при использовании Ionic framework для погодного приложения

Question

Я создаю приложение для погоды с использованием ионных, и это почти сделано. У меня есть проблема с ветром подшипником, в данных JSon мы имеем только градусы для направления ветра, и я должен использовать этот код, но он не отображается в текущем ..

$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

Answer 1

Связывание с синтаксисом {{text}} вставляет текст, а не скомпилированный HTML как @ misha130, и поэтому вы видите разметку, а не предполагаемый образ.

Вместо этого вам нужно связать, используя ng-bind-html. Так заменить DIV выше со следующим:

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

Если вы получаете ошибку $sce:unsafe, это означает, что необходимо дезинфицировать HTML первым. Сделайте это, включите скрипт для угловой санитации и введите ngSanitize в свой модуль.