This repo is the solution for this lab about building custom directives.
This solution has some pieces that deserve a bit more explanation:
- Using the controller and controllerAs attributes in the directive definition object allows us to use the
vm
syntax we use in other controllers.
var directive = {
restrict: 'E',
scope: {
city: '@'
},
replace: true,
templateUrl: 'templates/weatherCard.html',
controllerAs: 'weatherCardCtrl',
controller: weatherCardController
};
- The controller is defined separately and referred to in the directive definition object:
weatherCardController.$inject = ['$http', '$scope'];
function weatherCardController($http, $scope){
var vm = this;
var url="http://api.openweathermap.org/data/2.5/weather?mode=json&cnt=7&units=imperial&q=";
var apikey = "&appid=" + '284c1c2d36e318ea0a389b743d94c747';
vm.getWeather = function(city){
console.log(url + city + apikey);
$http({
method: 'GET',
url: url + city + apikey
}).then(function(response){
console.log(response);
vm.weather = response.data;
}, function(err){
console.log(err);
});
};
vm.getWeather($scope.city);
};
- This solution injects both
$http
and$scope
. Here,$scope
is used to access thecity
variable defined in the directive definition object'sscope
. In most other cases, thevm
syntax is a full replacement for using$scope
, but in this case, you need it to access the directive'sscope
. This was an unanticipated wrinkle that increased the degree of difficulty here.