API Rest Issue #5
Description
For any reason when i call to the rest countries the chosen don't refresh, this is my code
angular
.module('app')
.factory('CountryFactory', function ($http) {
var urlBase = 'https://restcountries-v1.p.mashape.com/all';
var dataFactory = {};
dataFactory.LoadCountries = function () {
return $http.get(urlBase, {
headers: {
"X-Mashape-Key": "YOUR_KEY"
}
});
}
return dataFactory;
})
.controller('UserController', ['$scope', 'CountryFactory', function ($scope, CountryFactory) {
InitController();
function InitController() {
CountryFactory
.LoadCountries()
.success(function (countries) {
$scope.countriesList = countries;
})
.error(function (data, status, headers, config) {
console.log(data);
console.log(status);
console.log(headers);
console.log(config);
});
}
My HTML
<select
class="form-control"
required
ng-model="user.Nationality"
data-placeholder="Select your nationality"
chosen="countriesList"
ng-options="country.demonym for country in countriesList">
</select>
I solved calling through to setInterval but i think that this not is the better way
....
.directive('chosen', function() {
var linker = function(scope, element, attr) {
// update the select when data is loaded
scope.$watch(attr.chosen, function(newVal, oldVal) {
var tmr = setInterval(function () {
element.trigger('chosen:updated');
clearInterval(tmr);
}, 1000);
});
// update the select when the model changes
scope.$watch(attr.ngModel, function() {
var tmr = setInterval(function () {
element.trigger('chosen:updated');
clearInterval(tmr);
}, 1000);
});
element.chosen();
};
return {
restrict: 'A',
link: linker
};
})
Regards and thanks for your time