Question

我正在尝试将图像的选框移动到自定义指令。最初在我的索引文件中，我有一个像下面这样的div

<div id="marquePic" style="width:90%"></div>

以及后来的脚本（正文结束）我正在做类似下面的事情

  $(document).ready(function(){


     var picData = [      //image data（json），param：image（image path），title（image title），link（image link）

            {
              image:'http://wowslider.com/sliders/demo-33/data1/images/dahlia.jpg',  
              title:'bbb',
              link:'#'
            }, 

            {
              image:'http://wowslider.com/sliders/demo-33/data1/images/dahlia.jpg',  
              title:'aa',
              link:'#'
            }
            ];


  $("#marquePic").picMarque({
        speed: 60,//scroll speed（ms）
        errorimg: 'http://www.siaa.org.cn/style/common/nophoto.jpg',//error image path
        data: picData
      });
        });

我正在使用jQuery PicMarquee.js获取图像的选框。

上面做的我能够创建marquee如果图像..后来我想到使用angular并将我的html代码移动到一个单独的指令，以便我可以重复使用它。（请注意：为简单起见，我只有一个div marquee as id。实际上，几乎没有更多的html元素，因此想到创建自定义指令）

当我在上面创建自定义指令时，代码不起作用

<our-clients></our-clients>

在js中我有

ourApp.directive('ourClients', function() {
return {
replace: true,
templateUrl: 'directives/clients.html'
};
});

clients.html只有与marquee相关的数据，例如

<div id="marquePic" style="width:90%"></div>

和marquee相关的js（picData等）在原始的html文件中，其中包含我的自定义指令。

然而，在完成上述操作后，我认为它不起作用。请建议。

Answer 1

将您的个人资料图片数组提供给您的指令，让它处理这些并调用您的第三方库。如果你想为它做一个指令，我也不会使用id。

控制器：

ft.replace(...)

指令：

$scope.picData = [{... images here ...}, {...}]

指令html：

ourApp.directive('ourClients', function() {
    return {
        replace: true,
        templateUrl: 'directives/clients.html',
        scope: {
            images: '='
        }
        link: function($scope, element){
            //or just use $(element).picMargue
            $(element).find('.marquePic').picMarque({
                speed: 60,//scroll speed（ms）
                errorimg: 'http://www.siaa.org.cn/style/common/nophoto.jpg',//error image path
                data: $scope.images
            });
        }
    };
});

称之为：

<div>
    <div class="marquePic"></div>
</div>

创建图像选框的自定义指令时出现问题（使用Angular）

1 个答案: