1

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">&nbsp;</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 introducir la descripción de la imagen aquí //Haciendo click en los botones del index.html#forecast Si se actualiza introducir la descripción de la imagen aquí **//Logs es igual para img 1 e img2 ** introducir la descripción de la imagen aquí

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

introducir la descripción de la imagen aquí

6
  • 1
    La funcion que ejecutas desde el menu lateral setLocation(item) en que controlador esta?
    – sioesi
    Commented el 9 nov. 2016 a las 2:51
  • Hola , las 2 estan bajo el mismo controlado OpenWeatherCtrl , básicamente toda la app esta bajo ese controlador , la vista lateral es un partial , ya que uso routerProvider para servir las plantillas
    – Kevin AB
    Commented el 9 nov. 2016 a las 3:00
  • pondré una parte del index.html , ya que poner todo ocuparía mucho espacio .
    – Kevin AB
    Commented el 9 nov. 2016 a las 3:01
  • Puedes hacer un console.log o alert dentro de la funcion $scope.getForecastByLocation = function(p) { sobre $scope.location ? Para ver que llega del menu y que llega del ng-click del boton?
    – sioesi
    Commented el 9 nov. 2016 a las 3:15
  • Hola , si ya lo habia hecho , pero el resultado es el mismo si se actualiza , por algo el input el que esta alado de search se actualiza ya que el modelo de ese input es location , sin embargo lo pondré para que lo vean.
    – Kevin AB
    Commented el 9 nov. 2016 a las 3:20

1 respuesta 1

1

Indagando en tu código me di cuenta que el scope que tienes en el menú lateral contra el resto son diferentes:

El menú lateral tiene id: 3, mientras que en tu menú donde buscas, y los botones que tienes arriba tienen el id: 4.

Revisando el código, me tomé la libertad de poner la variable que mencionas:

He impreso el forecast, para ver que tenía:

    </a>
</li>
<li>
    <a href="#/forecast"><img class="img-responsive" src="img/inicio/clima.png" alt="">
        <b><Ciudades/b>
    </a>
    <ul class="dropbox_citys">
        {{forecast}}
        <li ng-repeat="post in exampleLocations | orderBy:'name':true >
            <a ng-click="setLocation(post)">{{post}}</a>
        </li>
    </ul>
</li>
<li>
    <a href="/app/partials/mapa.html"><img class="img-responsive" src="img/inicio/clima.png"
        <b>Mapa</b>

Efectivamente sí, cambia cuando le doy buscar en tu menú, pero cambia en el que está del lado del menú.

Efectivamente sí, cambia cuando le doy buscar en tu menú]

Entonces he llegado a la conclusión que al tener un ng-view, con la aplicación de afuera, se comportan de manera diferente los $scope.

La solución que se me ocurre en estos momentos es que el "forecast" lo vuelvas global, algo como $rootScope.

1
  • Gracias por tomarte el tiempo , algo así pensé que con el ng-view se comportaba diferente .
    – Kevin AB
    Commented el 9 nov. 2016 a las 18:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.