In my project, there is an Angular directive responsible for loading data from a service. However, the data is being loaded using a variable obtained from a controller, which in turn was loaded from a service.
Below is the code snippet for the directive:
app.directive("posts", ['Posts', function(Posts) {
return {
restrict: 'E',
template: '' +
'<div ng-repeat="post in posts"></div>',
scope: {
showLoading: '&',
hideLoading: '&',
spot: '@'
},
controller: ['$scope', function ($scope) {
}],
link: function(scope, element, attrs) {
$scope.load = function () {
Posts.loadPostsBySpot(scope.spot)
};
}
};
}]);
Next, we have the controller code:
app.controller('spotPageController', ['$scope', 'Spots', function ($scope, $Spots) {
doit = function () {
Spots.getSpot($)
.success(function (data) {
$scope.spotId = data.data;
console.log($scope.spot);
}).error(function (data) {
console.log('error');
});
};
}]);
Inside the HTML file:
<posts spot="{{spotId}}" showLoading="showLoading()" hideLoading="hideLoading()"></posts>
One issue faced is that when the directive is loaded, the "spot" variable is not yet set. How can we ensure that the directive loads only after the spot is set?