Question

我创建了一个自定义指令，该指令应显示一个滑块，其中包含输入到自定义指令的数据。我需要能够显示图像Url并通过指令属性重定向链接，例如：

<div class="sliderBanner" imgUrl="http://example.com/img1.jpg" imgLink="example.com"></div>
<div class="sliderBanner" imgUrl="http://example.com/img2.jpg" imgLink="example.com"></div>
<div class="sliderBanner" imgUrl="http://example.com/img3.jpg" imgLink="example.com"></div>

现在我想收集这些数据并将它们放在指令范围内的数组中，并使用ng-repeat inside指令模板来显示它们。 Ë PS：我使用Swiper角度指令进行滑块操作。

var app = angular.module('APP',['ksSwiper']);

app.directive('sliderBanner',function($http){
    return{
        scope:true,
        restrict:'C',  
        link: function(scope,element,attr){
            scope.data = [];
            scope.data.push({
                "id": attr.id,
                "imgUrl": attr.imgUrl,
                "imgRef": attr.imgRef
             });
        },
        templateUrl: 'http://www.lajmislam.com/wp-content/themes/Newspaper/ng-templates/sliderBanner.html'    
    }
});

这是我的指令模板：

<ks-swiper-container autoplay="3000" show-nav-buttons="true"  pagination-is-active="true" swiper="swiper">
           <ks-swiper-slide ng-repeat="item in data">
              {{item.id}},{{item.imgUrl}}
          </ks-swiper-slide>
    </ks-swiper-container>

    <div ng-repeat="item in data">
        {{item.id}},{{item.imgUrl}}
    </div>

Answer 1

你看到了什么错误？

这里的内容似乎正在发挥作用。我在这里测试了它：https://github.com/styonsk/StackOverflowSolutions/tree/master/35997232

如何从自定义指令传递属性并将它们收集到数组中以显示到模板

1 个答案: