一个控制器上有两个相同的指令，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

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

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