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>'


 };

});

我需要的是，关于api调用节点的成功，我必须返回模板。我的观看页面是

<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。此图像URL被传递给指令。在视图方面，我将该指令称为自定义标记。

Answer 2

我创建了一个这个

的小例子

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

我为广告创建了一个指令，“X”用于关闭广告。

功能在控制器中（这不是推荐，而是例如）。我希望解决你的疑问

在角度js中实现广告指令

2 个答案: