在一个控制器上有两个相同的指令，dom load

Question

您好我有控制器模板，其中我声明了两个用于横幅的指令。 所以我有home.html 和

<div data-banner="{typeName: '1'}">
<div data-banner="{typeName: '2'}">

和

function bannerDirective() {
    return {
        restrict: 'A',
        templateUrl: 'banner/banner.html',
        controllerAs: 'vm',
        bindToController: true,
        controller: bannerController,
        scope: {
            bannerOptions: '=banner'
        },
        link: function(scope) {
            scope.$watch('bannerOptions', function() {
                $(".owl-carousel").owlCarousel({
                    loop: true,
                    autoWidth: true,
                    autoPlay: true,
                    pagination: false,
                    items: 1
                });
            });
        }
    };
}

我需要在这两个指令上使用$(".owl-carousel").owlCarousel来显示路由更改两个横幅。我不知道如何让它发挥作用。

Answer 1

您必须在指令owlcarousel函数中获取的特定元素上调用link。

link: function(scope, element) {
  scope.$watch('bannerOptions', function() {
    element.owlCarousel({
      loop: true,
      autoWidth: true,
      autoPlay: true,
      pagination: false,
      items: 1
    });
  });
}