реализация рекламной директивы в угловых js

Question

Я новичок угловой. Я работаю с угловым применением. Требование моего клиента - добавлять рекламу на некоторые страницы. У меня есть данные, такие как позиция для рекламы, изображение рекламы и т. Д. Я хотел бы реализовать эту функциональность как создание угловой директивы. Поэтому я могу назвать эту директиву тегом на своих страницах. Так может ли кто-нибудь сказать, как написать эту директиву? Пожалуйста, смотрите код ниже:

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); 
     }); 

}); 

Когда я проверяю на консоли, я получил «успеха рекламы», но не вернулся шаблон. Я проверил это на другом пути

app.directive('advertisement', function() { 


return { 
template: 'Name: {{advertisement}} <img src="https://angularjs.org/img/AngularJS-small.png" /> <span ng-click="closeAdvertisement()">X</span>' 


}; 

}); 

Моя потребность в том, что на успех апи вызова узла, я должен вернуть шаблон. Мой вид страницы

<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><a href= "{{banner_link}}" target="_blank"> <img ng-src="{{zentieraUrl}}/assets/images/adBanner/{{banner_pic_url}}"></a></div>', 
    link: function ($scope,$element,$attr,$rootScope) { 
      var imagePosition=$attr.imageposition; 
      nbs.getImage(imagePosition).then(function(result){ 
       $scope.banner_pic_url = result.data.banner; 
     }); 
    } 
}; 
}]); 

Наконец я решил эту проблему. Сначала я создаю директиву. В этой директиве я вернул шаблон. Директива также использует сервис.

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; 
}]); 

В службе, я беру данные с сервера, т.е. изображение url.This URL изображения передается в директиве. В стороне зрения я вызываю директиву как пользовательский тег.

Answer 2

создать небольшой пример этого

http://embed.plnkr.co/HD0KGabjWoq7bnwGaN5E/

создать директиву для рекламы, и «X» для закрытия этого.

Функциональность находится в контроллере (это не рекомендуется, но, например). Я надеюсь решить ваши сомнения