Estoy tratando de hacer lo siguiente , una consulta a 2 apis.
La primera consulta es para traer los datos de una localidad dada una ciudad , lo manejo con promesas.
La segunda consulta es ,para traer de ese dato 7 datos mas dado longitud,latitud y fecha , la hice haciend uso de una IIFE ,pues trate de hacerlo con $resource pero por mas que intente no podía solucionar problemas con el parseado de json.
Aqui esta el código que hace la consulta a la api para traer los datos y actualizar el model forecast,son 2 , uno para cuando cambia la localización y el otro que invoca directamente a la función que trae los datos.
$scope.setLocation = function(loc) {
$scope.location = loc;
$scope.getForecastByLocation();
};
$scope.getForecastByLocation = function(p) {
if ($scope.location == '' || $scope.location == undefined) {
$scope.hasState = 'has-warning';
$scope.message = 'Please provide a location';
}
$scope.hasState = 'has-success';
console.log("LOCACION==",$scope.location);
$scope.forecast = openWeatherMap.queryForecastDaily({
location: $scope.location
});
$scope.forecast.$promise.then(function(data){
for(var i=0;i<data.list.length;i++){
(function(i) {
var fecha=Date(data.list[i].dt);
var fecha2=new Date(fecha);
if(fecha2.getDate()+(i-1)<10){
var dias="0"+(fecha2.getDate()+(i-1));
}
else{
dias=fecha2.getDate()+(i-1);
}
var fechax=fecha2.getFullYear()+"-"+fecha2.getMonth()+"-"+dias+"Z";
var lon=parseInt(data.city.coord.lon);
var lat=parseInt(data.city.coord.lat);
var url="http://api.openweathermap.org/v3/uvi/"+lat+","+lon+"/"+fechax+".json?appid=943d3a75c72ea297aa73f129275d2140";
$http.get(url)
.success(function (dat) {
data.list[i].radiacion=dat.data;
console.log("Sucesss=",$scope.forecast.list[i].radiacion)
});
})(i);
}
});
}
Esta es la parte del código que ejecuta el cambio de localización setLocation(item) y a la vez hace al consulta a las apis , se ejecuta bien cuando lo clickeo desde
<div class="col-xs-12">
<div>
<h1>Listado de ciudades importantes</h1>
<div class="form-inline" role="form">
<span class="btn-group" >
<button ng-repeat="item in exampleLocations | orderBy:'name':true" ng-click="setLocation(item)" type="submit" class="btn btn-default">{{item}}</button>
</span>
<br><br><br><br>
<span class="form-group {{hasState}}">
<label class="sr-only" for="location">Ciudad</label>
<input ng-model="location" ng-enter="getForecastByLocation(location)" type="text" class="form-control" id="location" placeholder="Ciudad">
</span>
<button class="btn btn-primary " ng-click="getForecastByLocation(location)">Buscar!</button>
<span ng-show="message" class="alert"><span class="glyphicon glyphicon-arrow-left"> </span>{{message}}</span>
</div>
</div>
</div>
Se ejecuta sin ningún problema , pero ahora viene lo siguiente , tambíen tengo un menu lateral con la lista de ciudades,esta , le asigno un evento setLocation(post) , parecido al anterior , se ejecuta con normalidad , en los logs aparece que hace la consulta a la api , cuando muestro el dato que consigue la promesa en el código js que puse arriba , me muestra con normalidad (img 3),sin embargo el $scope.forecast no se actualiza , aqui parte del código que esta en la img2 y muestra el resultado de la consulta a la api.
<div class="col-xs-12">
<div class="">
<p> FORECAST== {{forecast}}</p>
<h3>
{{forecast.city.name | placeholder:'?'}}, {{forecast.city.country | isoCountry}}
<small>Lon: {{forecast.city.coord.lon | number:2}} Lat: {{forecast.city.coord.lat | number:2}} Population: {{forecast.city.population | number:0}}</small>
</h3>
</div>
</div>
</div>
//Menu lateral opciones ciudades
<ul class="dropbox_citys">
<li ng-repeat="post in exampleLocations | orderBy:'name':true" >
<a ng-click="setLocation(post)">{{post}}</a>
</li>
</ul>
Aqui les dejo unas imagenes ,el primero de lo que quiero hacer en el menu lateral estan las listas de ciudades hacer click y que se actualize el modelo ,$scope.forecast , en los logs haciendo uso del menu lateral o desde la misma interfaz donde estan todas las ciudades las que ven en la pantalla , el resultado es el mismo , las cabeceras son iguales , pero usando el menu lateral no se ejecuta la actualizacion del modelo , $scope.forecast , no se actualiza en el html , aún imprimiendo los datos que salen cuando hacen las consultas los cuales si existen.
//Haciendo click en el menu lateral No se actualiza //Haciendo click en los botones del index.html#forecast Si se actualiza **//Logs es igual para img 1 e img2 **
Sé que es algo simple , sin embargo llevo un buen rato sin hallar el problema , quizás me esté olvidando de algo. ¿Qué podría estar pasando?
---Update index.html---
<!DOCTYPE html>
<html lang="en" ng-app="openWeatherApp">
........
.......
<body ng-controller="OpenWeatherCtrl">
.............
<div id="page-content-wrapper" class="col-xs-12">
<div class="container-fluid">
<div class="col-xs-12 sect-2">
<div class="col-xs-12 sect-2">
<div class="col-xs-12 divs_ini_container">
<h2>Climas</h2>
<div class="col-xs-12 div_ini_01 sect-2" >
<center>
<div ng-view></div>
</center>
<p>
..................
..................
---Actualización 2---
console log de $scope.location
Repositorio:https://github.com/kevinlllR/arquisoft
setLocation(item)
en que controlador esta?$scope.getForecastByLocation = function(p) {
sobre $scope.location ? Para ver que llega del menu y que llega del ng-click del boton?