Error using Ionic framework for weather app

Question

I am building a weather app using ionic and it's almost done. I have a problem with the wind Bearing, in json data we have only degrees for wind direction and I have to use this code but it's not showing in current ..

$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>';
      }
    }

code html

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

result

Look mate, your app is badly designed. Angular needs to compile html to display it. Take a look at this http://stackoverflow.com/questions/18157305/angularjs-compiling-dynamic-html-strings-from-database Since its bad design writing an answer for it just seems redundant. I suggest you return objects rather than html from your function. I suggest you dont call your method from your view, but in the controller. After that display the objects data in the html of the view. — misha130, Jun 11 '16 at 10:30

score 0 · Answer 1 · answered Jun 11 '16 at 11:25

Binding with the {{text}} syntax inserts text, not compiled HTML as @misha130 said, and so you see markup and not the intended image.

You need to bind using ng-bind-html instead. So replace your div above with the following:

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

If you get the $sce:unsafe error, it means you need to sanitize the HTML first. Do do this, include a script for angular-sanitize and inject ngSanitize into your module.

Error using Ionic framework for weather app

1 Answers1