Witam, mam mały problem. Mianowicie po kliknięciu przycisku w widoku powinny mi się pobrać dane za pomocą fabryki z zewnetrznego serwera(dane pogodowe, w zależności które miasto będzie w select'cie). Dane się pobierają z tym, że muszę kliknąc 2x przycisk.
Kontroler:
(function(){
angular
.module('projectApp')
.controller('SinglearticleCtrl', SinglearticleCtrl);
SinglearticleCtrl.$inject=['$routeParams', 'articlesFactory', 'weatherfactory']
function SinglearticleCtrl($routeParams, articlesFactory, weatherfactory){
var sa=this;
sa.show=false;
sa.id=$routeParams.id;
sa.article=articlesFactory.getOneArticle(sa.id);
sa.cities=weatherfactory.getCities();
sa.weatherData=weatherData;
function weatherData(city){
sa.weather=weatherfactory.GetWeather(city);
sa.show=true;
}
}
})();
Fabryka:
(function(){
angular
.module('projectApp')
.factory('weatherfactory', weatherfactory);
weatherfactory.$inject=['$http'];
function weatherfactory($http){
var cities=[
{name: "Łódź", link: "http://api.openweathermap.org/data/2.5/weather?q=Lodz,pl"},
{name: "Warszawa", link: "http://api.openweathermap.org/data/2.5/weather?q=Warszawa,pl"}
];
var weat={};
var service={
getCities: getCities,
GetWeather: _GetWeather
};
return service;
function _GetWeather(link){
$http.get(link).success(function(data){
weat=data;
});
return weat;
}
function getCities(){
return cities;
}
}
})();
Widok:
<div class="row">
<div class="col-md-8">
<div class="panel panel-primary">
<div class="panel-heading">{{sa.article.title}}</div>
<div class="panel-body">{{sa.article.content}}</div>
</div>
</div>
<div class="col-md-4">
<div class="well">
<div class="row">
<div class="col-md-8">
<select class="form-control" ng-model="sa.city">
<option ng-repeat="city in sa.cities" value="{{city.link}}">{{city.name}}</option>
</select>
</div>
<div class="col-md-4">
<button class="btn btn-primary" ng-click="sa.weatherData(sa.city)">Wybierz</button>
</div>
<div ng-if="sa.show">
{{sa.weather.name}}
</div>
</div>
</div>
</div>
</div>