使用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框架进行天气应用程序的错误

回答

相关问题