implementing advertisement directive in angular js - angularjs

Question

I am a newbie angular. I am working with an angular application. My client requirement is to add an advertisement in some pages. I have the data like position for advertisement, advertisement image etc. I would like to implement this functionality as creating an angular directive. So I can call this directive as tag in my pages. So can anyone tell how to write this directive?
Please see the code below:
zentieraDirectives.directive('advertisement',function($http,$rootScope){
$http.post($rootScope.STATIC_URL + 'admins/getadvertisement').success(function(response){
console.log("success advertisement");
return {
template: 'Name: <img src="https://angularjs.org/img/AngularJS-small.png" /> <span ng-click="closeAdvertisement()">X</span>'
};
}) .error(function(err){
console.log("Error"+err);
});
});
When I check on console, I got "success advertisement", but not returned the template. I checked this on another way
app.directive('advertisement', function() {
return {
template: 'Name: {{advertisement}} <img src="https://angularjs.org/img/AngularJS-small.png" /> <span ng-click="closeAdvertisement()">X</span>'
};
});
My need is that, on the success of api call to node, I have to return the template. My view page is
<h1>advertisement</h1>
<advertisement ng-show="advertisementShow"></advertisement>

Answer 1

app.directive('navBannerTop', ['NavBannerServiceTop','$rootScope', function (nbs,$window) {
return {
restrict: 'E',
//scope: true,
scope: {},
template:' <div> <img ng-src="{{zentieraUrl}}/assets/images/adBanner/{{banner_pic_url}}"></div>',
link: function ($scope,$element,$attr,$rootScope) {
var imagePosition=$attr.imageposition;
nbs.getImage(imagePosition).then(function(result){
$scope.banner_pic_url = result.data.banner;
});
}
};
}]);
Finally I have solved the problem. First I create a directive. In that directive, I returned a template. The directive uses a service too.
app.service('NavBannerServiceTop', ['$http', '$q', function ($http, $q,$rootScope) {
var deferred = $q.defer();
var service = {};
service.getImage = function (imagePosition) {
var params={
position:imagePosition
};
$http.post(Config.STATIC_URL + 'users/getadvertisement',params).success(function (data) {
var adImage=data.data.banner;
var advlink=data.data.advlink;
deferred.resolve(data);
}).error(function () {
deferred.reject('some error');
});
return deferred.promise;
};
return service;
}]);
In the service, I take the data from server, ie the image url.This image url is passed to directive. In the view side I call the directive as a custom tag.

Answer 2

I create a little example of this
http://embed.plnkr.co/HD0KGabjWoq7bnwGaN5E/
I create a directive for the advertisement, and the "X" is for close this.
The functionality is in the controller (this not recomend but is for example).
I hope solve your doubt