将 Ionic 框架用于天气应用程序时出错答案

【问题标题】：Error using Ionic framework for weather app将 Ionic 框架用于天气应用程序时出错
【发布时间】：2016-06-11 09:57:32
【问题描述】：

我正在使用 ionic 构建一个天气应用程序，它几乎完成了。我的风轴承有问题，在 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

【问题讨论】：

看朋友，你的应用设计得很糟糕。 Angular 需要编译 html 来显示它。看看这个stackoverflow.com/questions/18157305/…，因为它的糟糕设计为它写一个答案似乎是多余的。我建议您从函数中返回对象而不是 html。我建议您不要从视图中调用您的方法，而是在控制器中调用。之后在视图的 html 中显示对象数据。

标签： javascript api ionic-framework weather

【解决方案1】：

使用 {{text}} 语法绑定会插入文本，而不是像 @misha130 所说的编译 HTML，因此您会看到标记而不是预期的图像。

您需要改用 ng-bind-html 进行绑定。因此，将上面的 div 替换为以下内容：

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

如果您收到 $sce:unsafe 错误，则意味着您需要先清理 HTML。这样做，包含一个用于 angular-sanitize 的脚本并将 ngSanitize 注入到您的模块中。

【讨论】：