Question

我正在尝试遍历HTTP请求后异步接收的天气数据。基本上我有一个带有一系列选项的工厂，我在$ http请求后动态添加选项：

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
    let coords = position.coords;
    WeatherService.get({lat: coords.latitude, lon: coords.longitude}).then(function (data) {
        //adding data to a factory variable, so I can access it via the main controller.
        WeatherModuleFactory.weatherData = data.data;
        // adding the new options
        CoreFactory.calendarOptions.push({
            name: $filter('translate')('weather'),
            template: appHelper.templatePath('extension/weather/weatherTemplateDirective')
        });
    }, function (error) {
        toastr.error(error.data);
    })
});
}

模板基本上是指向我的指令的链接，带有天气数据显示：

<weather-panel-extension weather-data="WeatherModuleFactory.weatherData"></weather-panel-extension>

指令也非常简单：

(function () {
'use strict';
angular.module('myapp.extension.weather')
    .directive('weatherPanelExtension', [function () {
        return {
            restrict: "AE",
            scope: {
                weatherData: "<"
            },
            templateUrl: appHelper.templatePath('extension/weather/weatherTemplate')
        };
    }]);
})();

这里我使用单向绑定（<），因为它只用于显示。

这是指令模板：

<div class="form-group">
{{weatherData.week | json}}
<h3>{{:: 'weatherForTheWeek' | translate }}</h3>
<div ng-show="weatherData.week.length === 0">
    <i class="fa fa-circle-o-notch fa-spin fa-3"></i>
</div>
<div ng-show="weatherData.week.length > 0" style="width: 100%; overflow-x: auto; white-space: nowrap">
    <table>
        <tr>
            <td>
                <span ng-repeat="value in weatherData.week track by $index"
                      style="border: groove; border-spacing: 15px; width: 15%; display: inline-block; text-align: center"
                      uib-tooltip="{{value.summary}}">
                    <span>{{value.date | parseInt | momentFormat:'ddd, DD MMM YYYY'}}</span>&nbsp;
                <span ng-if="value.isProblematicWeather" style="color: darkred;"
                      uib-tooltip="{{'problematicWeatherExplained' | translate }}"><i
                        class="fa fa-exclamation-circle" aria-hidden="true"></i></span><br>
                <skycon icon="value.icon" size="100" color="pink"></skycon>
                <br>
                <i class="fa fa-thermometer-full"></i>&nbsp;<span>{{value.maxTemp | number:0}} ° C</span><br>
                <i class="fa fa-thermometer-empty"></i>&nbsp;<span>{{value.minTemp | number:0}} ° C</span><br>
                <i class="fa fa-tint"></i>&nbsp;<span>{{value.humidity * 100 | number:0}} %</span>
                </span>
            </td>
        </tr>
    </table>
</div>
</div>

现在，我知道数据传递给指令HTML，因为{{weatherData.week | json }}完美无缺。但是，它不希望在ng-repeat="value in weatherData.week track by $index"中显示数据这是我的应用程序中的输出。
如您所见，JSON字符串就在那里。但我想在Météo pour les 7 prochains jours

下找一张包含天气数据的表格

异步调用后ng-repeat不起作用

0 个答案: